npm - @bodynarf/react.components - Versions diffs - 1.1.1 → 1.1.4 - Mend

@bodynarf/react.components 1.1.1 → 1.1.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (123) hide show

package/{src/components → components}/anchor/anchor.scss +0 -0
package/components/anchor/components/anchorWithIcon/index.d.ts +5 -0
package/components/anchor/components/anchorWithIcon/index.d.ts.map +1 -0
package/components/anchor/components/anchorWithIcon/index.js +16 -0
package/components/anchor/components/simpleAnchor/index.d.ts +5 -0
package/components/anchor/components/simpleAnchor/index.d.ts.map +1 -0
package/components/anchor/components/simpleAnchor/index.js +5 -0
package/components/anchor/index.d.ts +24 -0
package/components/anchor/index.d.ts.map +1 -0
package/components/anchor/index.js +18 -0
package/{src/components/anchor/types.ts → components/anchor/types.d.ts} +3 -9
package/components/anchor/types.d.ts.map +1 -0
package/components/anchor/types.js +1 -0
package/{src/components → components}/button/button.scss +0 -0
package/components/button/components/buttonWithIcon/index.d.ts +5 -0
package/components/button/components/buttonWithIcon/index.d.ts.map +1 -0
package/components/button/components/buttonWithIcon/index.js +19 -0
package/components/button/components/simpleButton/index.d.ts +5 -0
package/components/button/components/simpleButton/index.d.ts.map +1 -0
package/components/button/components/simpleButton/index.js +5 -0
package/components/button/index.d.ts +34 -0
package/components/button/index.d.ts.map +1 -0
package/components/button/index.js +27 -0
package/components/button/types.d.ts +20 -0
package/components/button/types.d.ts.map +1 -0
package/components/button/types.js +1 -0
package/components/dropdown/components/dropdownItem/index.d.ts +15 -0
package/components/dropdown/components/dropdownItem/index.d.ts.map +1 -0
package/components/dropdown/components/dropdownItem/index.js +6 -0
package/components/dropdown/components/dropdownLabel/index.d.ts +16 -0
package/components/dropdown/components/dropdownLabel/index.d.ts.map +1 -0
package/components/dropdown/components/dropdownLabel/index.js +21 -0
package/{src/components → components}/dropdown/dropdown.scss +0 -0
package/components/dropdown/index.d.ts +31 -0
package/components/dropdown/index.d.ts.map +1 -0
package/components/dropdown/index.js +57 -0
package/{src/components/dropdown/types.ts → components/dropdown/types.d.ts} +3 -4
package/components/dropdown/types.d.ts.map +1 -0
package/components/dropdown/types.js +1 -0
package/{src/components → components}/icon/icon.scss +0 -0
package/components/icon/index.d.ts +18 -0
package/components/icon/index.d.ts.map +1 -0
package/components/icon/index.js +15 -0
package/components/primitives/date/index.d.ts +11 -0
package/components/primitives/date/index.d.ts.map +1 -0
package/components/primitives/date/index.js +31 -0
package/components/primitives/index.d.ts +5 -0
package/components/primitives/index.d.ts.map +1 -0
package/components/primitives/index.js +4 -0
package/components/primitives/multiline/components/multilineWithLabel/index.d.ts +6 -0
package/components/primitives/multiline/components/multilineWithLabel/index.d.ts.map +1 -0
package/components/primitives/multiline/components/multilineWithLabel/index.js +29 -0
package/components/primitives/multiline/components/multilineWithoutLabel/index.d.ts +6 -0
package/components/primitives/multiline/components/multilineWithoutLabel/index.d.ts.map +1 -0
package/components/primitives/multiline/components/multilineWithoutLabel/index.js +25 -0
package/components/primitives/multiline/index.d.ts +13 -0
package/components/primitives/multiline/index.d.ts.map +1 -0
package/components/primitives/multiline/index.js +14 -0
package/components/primitives/text/components/textWithLabel/index.d.ts +6 -0
package/components/primitives/text/components/textWithLabel/index.d.ts.map +1 -0
package/components/primitives/text/components/textWithLabel/index.js +28 -0
package/components/primitives/text/components/textWithoutLabel/index.d.ts +6 -0
package/components/primitives/text/components/textWithoutLabel/index.d.ts.map +1 -0
package/components/primitives/text/components/textWithoutLabel/index.js +24 -0
package/components/primitives/text/index.d.ts +8 -0
package/components/primitives/text/index.d.ts.map +1 -0
package/components/primitives/text/index.js +14 -0
package/{src/components/primitives/types.ts → components/primitives/types.d.ts} +5 -32
package/components/primitives/types.d.ts.map +1 -0
package/components/primitives/types.js +1 -0
package/components/search/index.d.ts +31 -0
package/components/search/index.d.ts.map +1 -0
package/components/search/index.js +39 -0
package/{src/components → components}/search/search.scss +0 -0
package/{src/components/types.ts → components/types.d.ts} +5 -16
package/components/types.d.ts.map +1 -0
package/components/types.js +1 -0
package/hooks/index.d.ts +2 -0
package/hooks/index.d.ts.map +1 -0
package/hooks/index.js +1 -0
package/hooks/useComponentOutsideClick.d.ts +11 -0
package/hooks/useComponentOutsideClick.d.ts.map +1 -0
package/hooks/useComponentOutsideClick.js +32 -0
package/index.d.ts +10 -0
package/index.d.ts.map +1 -0
package/index.js +9 -0
package/package.json +10 -21
package/.github/ISSUE_TEMPLATE/bug_report.md +0 -25
package/anchor.ts +0 -10
package/button.ts +0 -11
package/date.ts +0 -7
package/dropdown.ts +0 -9
package/hooks.ts +0 -5
package/icon.ts +0 -7
package/index.html +0 -13
package/index.ts +0 -14
package/multiline.ts +0 -7
package/search.ts +0 -7
package/src/components/anchor/components/anchorWithIcon/anchorWithIcon.tsx +0 -45
package/src/components/anchor/components/simpleAnchor/simpleAnchor.tsx +0 -16
package/src/components/anchor/index.tsx +0 -64
package/src/components/button/components/buttonWithIcon/buttonWithIcon.tsx +0 -47
package/src/components/button/components/simpleButton/simpleButton.tsx +0 -16
package/src/components/button/index.tsx +0 -83
package/src/components/button/types.ts +0 -40
package/src/components/dropdown/components/dropdownItem/dropdownItem.tsx +0 -30
package/src/components/dropdown/components/dropdownLabel/dropdownLabel.tsx +0 -60
package/src/components/dropdown/index.tsx +0 -141
package/src/components/icon/index.tsx +0 -34
package/src/components/primitives/date/index.tsx +0 -103
package/src/components/primitives/multiline/components/multilineWithLabel/index.tsx +0 -93
package/src/components/primitives/multiline/components/multilineWithoutLabel/index.tsx +0 -51
package/src/components/primitives/multiline/index.tsx +0 -28
package/src/components/primitives/text/components/textWithLabel/index.tsx +0 -92
package/src/components/primitives/text/components/textWithoutLabel/index.tsx +0 -49
package/src/components/primitives/text/index.tsx +0 -21
package/src/components/search/index.tsx +0 -127
package/src/hooks/useComponentOutsideClick.ts +0 -48
package/src/main.tsx +0 -9
package/text.ts +0 -7
package/tsconfig.json +0 -39
package/tsconfig.node.json +0 -8
package/vite.config.ts +0 -14

package/icon.ts DELETED Viewed

@@ -1,7 +0,0 @@
-import Icon, { IconProps } from "src/components/icon";
-export default Icon;
-export {
-    IconProps,
-};

package/index.html DELETED Viewed

@@ -1,13 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <base href="/"/>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>bodynarf/react-components</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>

package/index.ts DELETED Viewed

@@ -1,14 +0,0 @@
-import { BaseInputElementProps, InputColor, InputLabel, InputSize } from "src/components/primitives/types";
-import { BaseElementProps, ElementIcon, IconPosition, IconSize } from "src/components/types";
-export {
-    BaseInputElementProps,
-    InputColor,
-    InputLabel,
-    InputSize,
-    BaseElementProps,
-    ElementIcon,
-    IconPosition,
-    IconSize,
-};

package/multiline.ts DELETED Viewed

@@ -1,7 +0,0 @@
-import Multiline, { MultilineProps } from "src/components/primitives/multiline";
-export default Multiline;
-export {
-    MultilineProps,
-};

package/search.ts DELETED Viewed

@@ -1,7 +0,0 @@
-import Search, { SearchProps } from "src/components/search";
-export default Search;
-export {
-    SearchProps,
-};

package/src/components/anchor/components/anchorWithIcon/anchorWithIcon.tsx DELETED Viewed

@@ -1,45 +0,0 @@
-import { isNullOrEmpty } from '@bodynarf/utils/common';
-import Icon from 'src/components/icon';
-import { AnchorWithIconProps } from "../../types";
-/** Anchor with icon component */
-export const AnchorWithIcon = ({ href, className, onClick, caption, title, target, icon }: AnchorWithIconProps): JSX.Element => {
-    const iconPosition = icon.position || 'left';
-    const iconClassName: string = isNullOrEmpty(caption)
-        ? icon.className
-        : iconPosition === 'left'
-            ? `${icon.className} app-icon--left`
-            : `${icon.className} app-icon--right`;
-    if (iconPosition === 'left') {
-        return (
-            <a
-                href={href}
-                className={className}
-                title={title}
-                target={target}
-                onClick={onClick}
-            >
-                <Icon {...icon} className={iconClassName} />
-                {caption}
-            </a>
-        );
-    }
-    return (
-        <a
-            href={href}
-            className={className}
-            title={title}
-            target={target}
-            onClick={onClick}
-        >
-            {caption}
-            <Icon {...icon} className={iconClassName} />
-        </a>
-    );
-};

package/src/components/anchor/components/simpleAnchor/simpleAnchor.tsx DELETED Viewed

@@ -1,16 +0,0 @@
-import { SimpleAnchorProps } from "../../types";
-/** Simple anchor component, without icon */
-export const SimpleAnchor = ({ href, className, onClick, caption, title, target }: SimpleAnchorProps): JSX.Element => {
-    return (
-        <a
-            className={className}
-            href={href}
-            title={title}
-            target={target}
-            onClick={onClick}
-        >
-            {caption}
-        </a>
-    );
-};

package/src/components/anchor/index.tsx DELETED Viewed

@@ -1,64 +0,0 @@
-import { isNullOrEmpty, isNullOrUndefined } from '@bodynarf/utils/common';
-import './anchor.scss';
-import { ElementIcon } from '../types';
-import { SimpleAnchor } from './components/simpleAnchor/simpleAnchor';
-import { AnchorWithIcon } from './components/anchorWithIcon/anchorWithIcon';
-export type AnchorProps = {
-    /** Link destination */
-    href?: string;
-    /** Link caption  */
-    caption?: string;
-    /** Click handler */
-    onClick?: () => void;
-    /** Configuration od inner icon */
-    icon?: ElementIcon;
-    /** Title of anchor */
-    title?: string;
-    /** Where to open the linked document */
-    target?: '_blank' | '_top';
-    /** Additional class names */
-    className?: string;
-    /** Should css hovering effects be disabled */
-    disableHovering?: boolean;
-};
-/** Anchor component */
-export default function Anchor(props: AnchorProps): JSX.Element {
-    if (isNullOrUndefined(props.caption) && isNullOrUndefined(props.icon)) {
-        throw new Error("No anchor content provided");
-    }
-    const className: string = 'app-anchor'
-        + (!isNullOrEmpty(props.className) ? ` ${props.className}` : '')
-        + (props.disableHovering === true ? ' app-anchor--unhoverable' : '');
-    if (isNullOrUndefined(props.icon)) {
-        return (
-            <SimpleAnchor
-                {...props}
-                className={className}
-                onClick={props.onClick}
-            />
-        );
-    }
-    return (
-        <AnchorWithIcon
-            {...props}
-            className={className}
-            onClick={props.onClick}
-            icon={props.icon as ElementIcon}
-        />
-    );
-}

package/src/components/button/components/buttonWithIcon/buttonWithIcon.tsx DELETED Viewed

@@ -1,47 +0,0 @@
-import { isNullOrEmpty } from '@bodynarf/utils/common';
-import Icon from 'src/components/icon';
-import { ButtonWithIconProps } from '../../types';
-/** Button with icon component */
-export const ButtonWithIcon = ({ className, disabled, onClick, caption, title, icon }: ButtonWithIconProps): JSX.Element => {
-    const iconPosition = icon.position || 'left';
-    const iconClassName: string = isNullOrEmpty(caption)
-        ? icon.className
-        : iconPosition === 'left'
-            ? `${icon.className} app-icon--left`
-            : `${icon.className} app-icon--right`;
-    className = isNullOrEmpty(caption)
-        ? `${className} button--icon-only`
-        : className;
-    if (iconPosition === 'left') {
-        return (
-            <button
-                className={className}
-                disabled={disabled}
-                onClick={onClick}
-                title={title}
-            >
-                <Icon {...icon} className={iconClassName} />
-                {caption}
-            </button>
-        );
-    }
-    return (
-        <button
-            className={className}
-            disabled={disabled}
-            onClick={onClick}
-            title={title}
-        >
-            {caption}
-            <Icon {...icon} className={iconClassName} />
-        </button>
-    );
-};

package/src/components/button/components/simpleButton/simpleButton.tsx DELETED Viewed

@@ -1,16 +0,0 @@
-import { SimpleButtonProps } from '../../types';
-/** Simple button component, without icon */
-export const SimpleButton = ({ className, disabled, onClick, caption, title }: SimpleButtonProps): JSX.Element => {
-    return (
-        <button
-            className={className}
-            disabled={disabled}
-            onClick={onClick}
-            title={title}
-        >
-            {caption}
-        </button>
-    );
-};

package/src/components/button/index.tsx DELETED Viewed

@@ -1,83 +0,0 @@
-import { isNullOrEmpty, isNullOrUndefined, isStringEmpty } from '@bodynarf/utils/common';
-import './button.scss';
-import { ElementIcon, IconSize } from '../types';
-import { ButtonType } from './types';
-import { ButtonWithIcon } from './components/buttonWithIcon/buttonWithIcon';
-import { SimpleButton } from './components/simpleButton/simpleButton';
-export type ButtonProps = {
-    /** Button displaying text */
-    caption?: string;
-    /** Type of button (color)  */
-    type: ButtonType;
-    /** Configuration of inner icon */
-    icon?: ElementIcon;
-    /** Button size  */
-    size?: IconSize; // TODO: fix this type using
-    /** Title on hover */
-    title?: string;
-    /** Is button uses light version of color  */
-    light?: boolean;
-    /** Is button outlined */
-    outlined?: boolean;
-    /** Should button corners be rounded  */
-    rounded?: boolean;
-    /** Display loading icon */
-    isLoading?: boolean;
-    /** Is button disabled */
-    disabled?: boolean;
-    /** Click action handler */
-    onClick?: () => void;
-};
-/**
- * Button component
- * @throws Caption is not defined and icon configuration is not defined at the same time
- */
-export default function Button(props: ButtonProps): JSX.Element {
-    if ((isNullOrEmpty(props.caption))
-        && (isNullOrUndefined(props.icon) || isStringEmpty(props.icon?.className as string))
-    ) {
-        throw new Error("No button content provided.");
-    }
-    const className: string =
-        `button is-${props.type}`
-        + (props.light === true ? ' is-light' : '')
-        + (!isNullOrUndefined(props.size) ? ` is-${props.size}` : '')
-        + (props.outlined === true ? ' is-outlined' : '')
-        + (props.rounded === true ? ' is-rounded' : '')
-        + (props.isLoading === true ? ' is-loading' : '');
-    if (!isNullOrUndefined(props.icon)) {
-        return (
-            <ButtonWithIcon
-                {...props}
-                className={className}
-                onClick={props.onClick}
-                icon={props.icon as ElementIcon}
-            />
-        );
-    } else {
-        return (
-            <SimpleButton
-                {...props}
-                className={className}
-                onClick={props.onClick}
-            />
-        );
-    }
-}

package/src/components/button/types.ts DELETED Viewed

@@ -1,40 +0,0 @@
-import { ElementIcon } from "../types";
-/** Button types according to Bulma framework */
-export type ButtonType =
-    'default' /** color: transparent */
-    | 'primary' /** color: seawave green */
-    | 'link' /** color: blue-violet */
-    | 'info' /** color: sky-blue */
-    | 'success' /** color: green */
-    | 'warning' /** color: yellow */
-    | 'danger' /** color: red */
-    | 'white' /** color: white */
-    | 'light' /** color: light-gray */
-    | 'dark' /** color: dark-gray */
-    | 'black' /** color: black */
-    | 'text' /** Underline text with color: gray */
-    | 'ghost' /** Blue underline text with color: transparent */
-    ;
-export type SimpleButtonProps = {
-    /** Button class name*/
-    className: string;
-    /** Button click handler */
-    onClick?: () => void;
-    /** Button caption */
-    caption?: string;
-    /** Disabled attribute value*/
-    disabled?: boolean;
-    /** Title on hover */
-    title?: string;
-};
-export type ButtonWithIconProps = SimpleButtonProps & {
-    /** Icon configuration */
-    icon: ElementIcon;
-};

package/src/components/dropdown/components/dropdownItem/dropdownItem.tsx DELETED Viewed

@@ -1,30 +0,0 @@
-import { SelectableItem } from "../../types";
-/** Dropdown item props */
-interface DropdownItemProps {
-    /** Item to present in dropdown */
-    item: SelectableItem;
-    /** Is item selected*/
-    selected: boolean;
-    /** Item click handler */
-    onClick: (event: React.MouseEvent<HTMLLIElement>) => void;
-}
-/** Single item in dropdown component */
-const DropdownItem = ({ item, selected, onClick }: DropdownItemProps): JSX.Element => {
-    return (
-        <li
-            key={item.id}
-            className={`app-dropdown-item dropdown-item${selected ? " is-active" : ""}`}
-            onClick={onClick}
-            data-dropdown-item-value={item.value}
-            title={item.displayValue}
-        >
-            {item.displayValue}
-        </li>
-    );
-};
-export default DropdownItem;

package/src/components/dropdown/components/dropdownLabel/dropdownLabel.tsx DELETED Viewed

@@ -1,60 +0,0 @@
-import { MouseEvent } from 'react';
-import { isNullOrEmpty, isNullOrUndefined } from "@bodynarf/utils/common";
-import Icon from 'src/components/icon';
-import { SelectableItem } from "../../types";
-interface DropdownLabelProps {
-    /** Caption when no items selected */
-    caption: string;
-    /** Can user deselect */
-    deselectable: boolean;
-    /** Selected item */
-    selectedItem?: SelectableItem;
-    /** Click handler*/
-    onClick: (event: MouseEvent<HTMLLabelElement>) => void;
-}
-/** Label component */
-const DropdownLabel = ({ caption, selectedItem, onClick, deselectable }: DropdownLabelProps): JSX.Element => {
-    const itemSelected = !isNullOrUndefined(selectedItem);
-    const text = itemSelected
-        ? selectedItem?.displayValue
-        : caption;
-    const deselectVisible = deselectable && itemSelected;
-    const className = [
-        "dropdown-trigger",
-        "app-dropdown__label",
-        itemSelected ? "" : "app-dropdown__label--default",
-        "button"
-    ].filter(x => !isNullOrEmpty(x))
-        .join(" ");
-    return (
-        <label
-            className={className}
-            onClick={onClick}
-        >
-            {deselectVisible &&
-                <Icon className="plus-lg" />
-            }
-            <span
-                className={deselectVisible ? "mx-2" : "mr-2"}
-                title={itemSelected ? text : undefined}
-            >
-                {text}
-            </span>
-            <Icon className="arrow-up" />
-        </label>
-    );
-};
-export default DropdownLabel;

package/src/components/dropdown/index.tsx DELETED Viewed

@@ -1,141 +0,0 @@
-import { MouseEvent, useCallback, useId, useState } from 'react';
-import './dropdown.scss';
-import { isNullOrEmpty, isNullOrUndefined } from '@bodynarf/utils/common';
-import { useComponentOutsideClick } from 'src/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/index.tsx DELETED Viewed

@@ -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>
-    );
-}