@bodynarf/react.components 1.7.3 → 1.7.4

package/src/components/primitives/number/components/withoutLabel/index.tsx

@@ -0,0 +1,66 @@
+import { ChangeEvent, useCallback } from "react";
+
+import { generateGuid, getClassName, getValueOrDefault } from "@bodynarf/utils";
+
+import { ElementSize } from "@bbr/components";
+import { getValidationValues } from "@bbr/utils";
+
+import { NumberProps } from "@bbr/components/number";
+
+/** Number component without label */
+const NumberWithoutLabel = ({
+    onValueChange, readonly, disabled, defaultValue, validationState,
+    name,
+    className, size, style, rounded, loading,
+    placeholder,
+    onBlur,
+    step,
+}: NumberProps): JSX.Element => {
+    const onChange = useCallback(
+        (event: ChangeEvent<HTMLInputElement>) => onValueChange(+event.target.value),
+        [onValueChange]
+    );
+
+    const [isValidationDefined, styleClassName, validationMessages] = getValidationValues(style, validationState);
+
+    const elClassName = getClassName([
+        className,
+        "is-{0}".format(getValueOrDefault(size, ElementSize.Normal)),
+        rounded === true ? "is-rounded" : "",
+        styleClassName,
+        "input",
+    ]);
+
+    const containerClassName = getClassName([
+        "control",
+        "bbr-input",
+        loading === true ? "is-loading" : "",
+    ]);
+
+    const id = name || generateGuid();
+
+    return (
+        <>
+            <div className={containerClassName}>
+                <input
+                    type="number"
+                    className={elClassName}
+                    placeholder={placeholder}
+                    readOnly={readonly}
+                    disabled={disabled}
+                    defaultValue={defaultValue}
+                    onChange={onChange}
+                    onBlur={onBlur}
+                    name={id}
+                    id={id}
+                    step={step ?? 1}
+                />
+            </div>
+            {isValidationDefined && validationMessages.length > 0 &&
+                <p className={`help m-help ${styleClassName}`}>{validationMessages.join("\n")}</p>
+            }
+        </>
+    );
+};
+
+export default NumberWithoutLabel;

package/src/components/primitives/number/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./component";
+export * from "./types";

package/{components/primitives/number/types.d.ts → src/components/primitives/number/types.ts}

@@ -1,8 +1,10 @@
 import { BaseInputElementProps } from "@bbr/components";
+
 /** Number component props type */
 export interface NumberProps extends BaseInputElementProps<number> {
     /** Focus out event handler */
     onBlur?: () => void;
+
     /**
      * Difference which will be used to change value after step button click.
      * See html input step documentation.
@@ -10,4 +12,3 @@ export interface NumberProps extends BaseInputElementProps<number> {
     */
     step?: number;
 }
-//# sourceMappingURL=types.d.ts.map

package/src/components/primitives/password/component/index.tsx

@@ -0,0 +1,19 @@
+import { isNullOrUndefined } from "@bodynarf/utils";
+
+import "./style.scss";
+
+import { PasswordProps } from "@bbr/components/password";
+
+import PasswordWithLabel from "@bbr/components/password/components/withLabel";
+import PasswordWithoutLabel from "@bbr/components/password/components/withoutLabel";
+
+/** Password input component */
+const Password = (props: PasswordProps): JSX.Element => {
+    if (isNullOrUndefined(props.label)) {
+        return <PasswordWithoutLabel {...props} />;
+    }
+
+    return <PasswordWithLabel {...props} />;
+};
+
+export default Password;

package/src/components/primitives/password/component/style.scss

@@ -0,0 +1,16 @@
+.bbr-password {
+    &:focus ~ .icon:not(:hover) {
+        color: rgb(219, 219, 219) !important;
+    }
+
+    &__wrapper {
+        .icon {
+            pointer-events: inherit !important;
+            cursor: pointer;
+
+            &:hover {
+                color: rgb(74, 74, 74);
+            }
+        }
+    }
+}

package/src/components/primitives/password/components/withLabel/index.tsx

@@ -0,0 +1,147 @@
+import { ChangeEvent, useCallback, useState } from "react";
+
+import { generateGuid, getClassName, getValueOrDefault } from "@bodynarf/utils";
+
+import { getValidationValues } from "@bbr/utils";
+import { ElementSize } from "@bbr/components";
+import Icon from "@bbr/components/icon";
+
+import { PasswordProps } from "@bbr/components/password";
+
+const PasswordWithLabel = ({
+    onValueChange, disabled, validationState,
+    name,
+    className, size, style, rounded, loading,
+    label, placeholder,
+    canShowPassword,
+}: PasswordProps): JSX.Element => {
+    const onChange = useCallback(
+        (event: ChangeEvent<HTMLInputElement>) => onValueChange(event.target.value),
+        [onValueChange]
+    );
+
+    const [contentIsHidden, setContentIsHidden] = useState(true);
+    const onIconClick = useCallback(() => setContentIsHidden(state => !state), [setContentIsHidden]);
+
+    const [isValidationDefined, styleClassName, validationMessages] = getValidationValues(style, validationState);
+    const elSizeClassName = "is-{0}".format(getValueOrDefault(size, ElementSize.Normal));
+    const id = name || generateGuid();
+
+    const elClassName = getClassName([
+        className,
+        elSizeClassName,
+        rounded === true ? "is-rounded" : "",
+        styleClassName,
+        "bbr-password",
+        "input",
+    ]);
+
+    const inputContainerClassName = getClassName([
+        "control",
+        loading === true ? "is-loading" : "",
+        canShowPassword ? "has-icons-right" : "",
+        "bbr-password__wrapper",
+    ]);
+
+    const labelClassName = getClassName([
+        "label",
+        !label!.horizontal ? elSizeClassName : "",
+        label!.className
+    ]);
+
+    if (label!.horizontal) {
+        const labelContainerClassName = getClassName([
+            "field-label",
+            elSizeClassName,
+            label!.horizontalContainerClassName
+        ]);
+
+        const fieldContainerClassName = getClassName([
+            "field-body",
+            label!.horizontalFieldContainerClassName
+        ]);
+
+        return (
+            <div className="bbr-input field is-horizontal">
+                <div className={labelContainerClassName}>
+                    <label
+                        className={labelClassName}
+                        htmlFor={id}
+                    >
+                        {label!.caption}
+                    </label>
+                </div>
+                <div className={fieldContainerClassName}>
+                    <div className="field">
+                        <div className={inputContainerClassName}>
+                            <input
+                                type={contentIsHidden ? "password" : "text"}
+                                className={elClassName}
+                                placeholder={placeholder}
+                                disabled={disabled}
+                                onChange={onChange}
+                                name={id}
+                                id={id}
+                            />
+                            {canShowPassword && !loading &&
+                                <span
+                                    className={`icon is-right ${elSizeClassName}`}
+                                    onMouseEnter={onIconClick}
+                                    onMouseLeave={onIconClick}
+                                    title="Show password"
+                                >
+                                    <Icon
+                                        name={contentIsHidden ? "eye" : "eye-slash"}
+                                        size={ElementSize.Medium}
+                                    />
+                                </span>
+                            }
+                        </div>
+                        {isValidationDefined && validationMessages.length > 0 &&
+                            <p className={`help m-help ${styleClassName}`}>{validationMessages.join("\n")}</p>
+                        }
+                    </div>
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <div className="bbr-input field">
+            <label
+                className={labelClassName}
+                htmlFor={id}
+            >
+                {label!.caption}
+            </label>
+            <div className={inputContainerClassName}>
+                <input
+                    type={contentIsHidden ? "password" : "text"}
+                    className={elClassName}
+                    placeholder={placeholder}
+                    disabled={disabled}
+                    onChange={onChange}
+                    name={id}
+                    id={id}
+                />
+                {canShowPassword && !loading &&
+                    <span
+                        className={`icon is-right ${elSizeClassName}`}
+                        onMouseEnter={onIconClick}
+                        onMouseLeave={onIconClick}
+                    >
+                        <Icon
+                            name={contentIsHidden ? "eye" : "eye-slash"}
+                            size={ElementSize.Medium}
+                        />
+                    </span>
+                }
+            </div>
+            {isValidationDefined && validationMessages.length > 0 &&
+                <p className={`help m-help ${styleClassName}`}>{validationMessages.join("\n")}</p>
+            }
+        </div>
+    );
+};
+
+export default PasswordWithLabel;

package/src/components/primitives/password/components/withoutLabel/index.tsx

@@ -0,0 +1,79 @@
+import { ChangeEvent, useCallback, useState } from "react";
+
+import { generateGuid, getClassName, getValueOrDefault } from "@bodynarf/utils";
+
+import { ElementSize } from "@bbr/components";
+import { getValidationValues } from "@bbr/utils";
+import Icon from "@bbr/components/icon";
+
+import { PasswordProps } from "@bbr/components/password";
+
+const PasswordWithoutLabel = ({
+    onValueChange, disabled, validationState,
+    name,
+    className, size, style, rounded, loading,
+    placeholder,
+    canShowPassword,
+}: PasswordProps): JSX.Element => {
+    const onChange = useCallback(
+        (event: ChangeEvent<HTMLInputElement>) => onValueChange(event.target.value),
+        [onValueChange]
+    );
+
+    const [contentIsHidden, setContentIsHidden] = useState(true);
+    const onIconClick = useCallback(() => setContentIsHidden(state => !state), [setContentIsHidden]);
+
+    const [isValidationDefined, styleClassName, validationMessages] = getValidationValues(style, validationState);
+    const elSizeClassName = "is-{0}".format(getValueOrDefault(size, ElementSize.Normal));
+    const id = name || generateGuid();
+
+    const elClassName = getClassName([
+        className,
+        elSizeClassName,
+        rounded === true ? "is-rounded" : "",
+        styleClassName,
+        "bbr-password",
+        "input",
+    ]);
+
+    const containerClassName = getClassName([
+        "control",
+        "bbr-input",
+        loading === true ? "is-loading" : "",
+        canShowPassword ? "has-icons-right" : "",
+        "bbr-password__wrapper",
+    ]);
+
+    return (
+        <>
+            <div className={containerClassName}>
+                <input
+                    type={contentIsHidden ? "password" : "text"}
+                    className={elClassName}
+                    placeholder={placeholder}
+                    disabled={disabled}
+                    onChange={onChange}
+                    name={id}
+                    id={id}
+                />
+                {canShowPassword && !loading &&
+                    <span
+                        className={`icon is-right ${elSizeClassName}`}
+                        onMouseEnter={onIconClick}
+                        onMouseLeave={onIconClick}
+                    >
+                        <Icon
+                            name={contentIsHidden ? "eye" : "eye-slash"}
+                            size={ElementSize.Medium}
+                        />
+                    </span>
+                }
+            </div>
+            {isValidationDefined && validationMessages.length > 0 &&
+                <p className={`help m-help ${styleClassName}`}>{validationMessages.join("\n")}</p>
+            }
+        </>
+    );
+};
+
+export default PasswordWithoutLabel;

package/src/components/primitives/password/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./component";
+export * from "./types";

package/{components/primitives/password/types.d.ts → src/components/primitives/password/types.ts}

@@ -1,4 +1,5 @@
 import { BaseInputElementProps } from "@bbr/components";
+
 /** Password component props type */
 export interface PasswordProps extends Omit<BaseInputElementProps<string>, "defaultValue" | "readonly"> {
     /**
@@ -7,4 +8,3 @@ export interface PasswordProps extends Omit<BaseInputElementProps<string>, "defa
     */
     canShowPassword: boolean;
 }
-//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1,20 @@
+import { isNullOrUndefined } from "@bodynarf/utils";
+
+import "../../../../common.scss";
+
+import { TextProps } from "@bbr/components";
+
+import TextWithLabel from "@bbr/components/text/components/textWithLabel";
+import TextWithoutLabel from "@bbr/components/text/components/textWithoutLabel";
+
+/** Textual input component */
+const Text = (props: TextProps): JSX.Element => {
+    if (isNullOrUndefined(props.label)) {
+        return (<TextWithoutLabel {...props} />);
+    }
+    else {
+        return (<TextWithLabel {...props} />);
+    }
+};
+
+export default Text;

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

@@ -0,0 +1,123 @@
+import { ChangeEvent, useCallback } from "react";
+
+import { generateGuid, getClassName, getValueOrDefault, } from "@bodynarf/utils";
+
+import { ElementSize } from "@bbr/components";
+import { getValidationValues } from "@bbr/utils";
+
+import { TextProps } from "@bbr/components/text";
+
+/** Textual input with describing label */
+const TextWithLabel = ({
+    onValueChange, readonly, disabled, defaultValue, validationState,
+    name,
+    className, size, style, rounded, loading,
+    label, placeholder,
+    onBlur,
+}: TextProps): JSX.Element => {
+    const onChange = useCallback(
+        (event: ChangeEvent<HTMLInputElement>) => onValueChange(event.target.value),
+        [onValueChange]
+    );
+
+    const id = name || generateGuid();
+    const elSizeClassName = "is-{0}".format(getValueOrDefault(size, ElementSize.Normal));
+
+    const [isValidationDefined, styleClassName, validationMessages] = getValidationValues(style, validationState);
+
+    const elClassName = getClassName([
+        className,
+        elSizeClassName,
+        rounded === true ? "is-rounded" : "",
+        styleClassName,
+        "input",
+    ]);
+
+    const inputContainerClassName = getClassName([
+        "control",
+        loading === true ? "is-loading" : "",
+    ]);
+
+    const labelClassName = getClassName([
+        "label",
+        !label!.horizontal ? elSizeClassName : "",
+        label!.className
+    ]);
+
+    if (label!.horizontal) {
+        const labelContainerClassName = getClassName([
+            "field-label",
+            elSizeClassName,
+            label!.horizontalContainerClassName
+        ]);
+
+        const fieldContainerClassName = getClassName([
+            "field-body",
+            label!.horizontalFieldContainerClassName
+        ]);
+
+        return (
+            <div className="bbr-input field is-horizontal">
+                <div className={labelContainerClassName}>
+                    <label
+                        className={labelClassName}
+                        htmlFor={id}
+                    >
+                        {label!.caption}
+                    </label>
+                </div>
+                <div className={fieldContainerClassName}>
+                    <div className="field">
+                        <div className={inputContainerClassName}>
+                            <input
+                                type="text"
+                                className={elClassName}
+                                placeholder={placeholder}
+                                readOnly={readonly}
+                                disabled={disabled}
+                                defaultValue={defaultValue}
+                                onChange={onChange}
+                                onBlur={onBlur}
+                                name={id}
+                                id={id}
+                            />
+                        </div>
+                        {isValidationDefined && validationMessages.length > 0 &&
+                            <p className={`help m-help ${styleClassName}`}>{validationMessages.join("\n")}</p>
+                        }
+                    </div>
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <div className="bbr-input field">
+            <label
+                className={labelClassName}
+                htmlFor={id}
+            >
+                {label!.caption}
+            </label>
+            <div className={inputContainerClassName}>
+                <input
+                    type="text"
+                    className={elClassName}
+                    placeholder={placeholder}
+                    readOnly={readonly}
+                    disabled={disabled}
+                    defaultValue={defaultValue}
+                    onChange={onChange}
+                    onBlur={onBlur}
+                    name={id}
+                    id={id}
+                />
+            </div>
+            {isValidationDefined && validationMessages.length > 0 &&
+                <p className={`help m-help ${styleClassName}`}>{validationMessages.join("\n")}</p>
+            }
+        </div>
+    );
+};
+
+export default TextWithLabel;

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

@@ -0,0 +1,64 @@
+import { ChangeEvent, useCallback } from "react";
+
+import { generateGuid, getClassName, getValueOrDefault } from "@bodynarf/utils";
+
+import { ElementSize } from "@bbr/components";
+import { getValidationValues } from "@bbr/utils";
+
+import { TextProps } from "@bbr/components/text";
+
+/** Textual input without describing label */
+const TextWithoutLabel = ({
+    onValueChange, readonly, disabled, defaultValue, validationState,
+    name,
+    className, size, style, rounded, loading,
+    placeholder,
+    onBlur,
+}: TextProps): JSX.Element => {
+    const onChange = useCallback(
+        (event: ChangeEvent<HTMLInputElement>) => onValueChange(event.target.value),
+        [onValueChange]
+    );
+
+    const [isValidationDefined, styleClassName, validationMessages] = getValidationValues(style, validationState);
+
+    const elClassName = getClassName([
+        className,
+        "is-{0}".format(getValueOrDefault(size, ElementSize.Normal)),
+        rounded === true ? "is-rounded" : "",
+        styleClassName,
+        "input",
+    ]);
+
+    const containerClassName = getClassName([
+        "control",
+        "bbr-input",
+        loading === true ? "is-loading" : "",
+    ]);
+
+    const id = name || generateGuid();
+
+    return (
+        <>
+            <div className={containerClassName}>
+                <input
+                    className={elClassName}
+                    type="text"
+                    placeholder={placeholder}
+                    readOnly={readonly}
+                    disabled={disabled}
+                    defaultValue={defaultValue}
+                    onChange={onChange}
+                    onBlur={onBlur}
+                    name={id}
+                    id={id}
+                />
+            </div>
+            {isValidationDefined && validationMessages.length > 0 &&
+                <p className={`help m-help ${styleClassName}`}>{validationMessages.join("\n")}</p>
+            }
+        </>
+    );
+};
+
+export default TextWithoutLabel;

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

@@ -0,0 +1,2 @@
+export { default } from "./component";
+export * from "./types";

package/{components/primitives/text/types.d.ts → src/components/primitives/text/types.ts}

@@ -1,7 +1,7 @@
 import { BaseInputElementProps } from "@bbr/components";
+
 /** Text input component props type */
 export interface TextProps extends BaseInputElementProps<string> {
     /** Focus out event handler */
     onBlur?: () => void;
 }
-//# sourceMappingURL=types.d.ts.map

package/{components/primitives/types/baseProps.d.ts → src/components/primitives/types/baseProps.ts}

@@ -1,30 +1,42 @@
 import { BaseElementProps, ElementColor, ElementSize } from "@bbr/components";
+
 import { InputLabel, ValidationState } from ".";
+
 /** Base properties for input components */
 export interface BaseInputElementProps<TValue> extends BaseElementProps {
     /** Value change handler. Changed value must be stored outside of component */
     onValueChange: (value?: TValue) => void;
+
     /** Default value of input component*/
     defaultValue?: TValue;
+
     /** Input element placeholder */
     placeholder?: string;
+
     /** Is component borders are rounded */
     rounded?: boolean;
+
     /** Should be component disabled. Selecting is not allowed */
     disabled?: boolean;
+
     /** Should be component int read only mode. Selecting is allowed */
     readonly?: boolean;
+
     /** Component size */
     size?: ElementSize;
+
     /** Label configuration */
     label?: InputLabel;
+
     /** Displaying loading state of component as spinner in right end of component */
     loading?: boolean;
+
     /** Style. Colors the border */
     style?: ElementColor;
+
     /** Name of element. Required for form elements */
     name?: string;
+
     /** Current validation state */
     validationState?: ValidationState;
 }
-//# sourceMappingURL=baseProps.d.ts.map

package/src/components/primitives/types/index.ts

@@ -0,0 +1,3 @@
+export * from "./baseProps";
+export * from "./label";
+export * from "./validation";

package/src/components/primitives/types/label.ts

@@ -0,0 +1,17 @@
+/** Input label configuration */
+export interface InputLabel {
+    /** Label textual content to describe input requirements */
+    caption: string;
+
+    /** Should component be on same line with label */
+    horizontal: boolean;
+
+    /** Additional class names */
+    className?: string;
+
+    /** Class name for label parent container in horizontal mode */
+    horizontalContainerClassName?: string;
+
+    /** Class name for input parent container in horizontal mode */
+    horizontalFieldContainerClassName?: string;
+}

package/src/components/primitives/types/validation/index.ts

@@ -0,0 +1,2 @@
+export * from "./status";
+export * from "./state";

package/src/components/primitives/types/validation/state.ts

@@ -0,0 +1,10 @@
+import { ValidationStatus } from "./status";
+
+/** Form component value validation state */
+export interface ValidationState {
+    /** Current status */
+    status: ValidationStatus;
+
+    /** Current status messages */
+    messages: Array<string>;
+};