@bodynarf/react.components 1.1.1 → 1.1.4

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;

package/src/components/search/index.tsx

@@ -1,127 +0,0 @@
-import { ChangeEvent, useCallback, useState } from 'react';
-
-import './search.scss';
-
-import { generateGuid } from '@bodynarf/utils/guid';
-import { isNullOrUndefined } from '@bodynarf/utils/common';
-
-import Button from 'src/components/button';
-
-export type SearchProps = {
-    /** Search caption */
-    caption: string;
-
-    /** Search handler */
-    onSearch: (searchPattern: string) => void;
-
-    /** Initial search value */
-    defaultValue?: string;
-
-    /** 
-     * Search type: by typing, starts from minimum characters to search
-     * or by clicking on button next to search bar.
-     * Default is byTyping
-    */
-    searchType?: 'byTyping' | 'byButton';
-
-    /** Control name. If empty - will be replaced by random guid */
-    name?: string;
-
-    /** Minimum amount of characters to search */
-    minCharsToSearch?: number;
-
-    /** Size of search bar */
-    size?: 'small' | 'normal' | 'medium' | 'large';
-
-    /** Should search bar be rounded */
-    rounded?: boolean;
-
-    /** Is search bar disabled */
-    disabled?: boolean;
-
-    /** Should loading icon be displayed in search bar*/
-    isLoading?: boolean;
-};
-
-/** Search component */
-export default function Search(props: SearchProps): JSX.Element {
-    const [name] = useState<string>(props.name || generateGuid());
-    const [searchValue, setSearchValue] = useState<string>(props.defaultValue || '');
-
-    const searchType = props.searchType || 'byTyping';
-
-    const onChange = useCallback(
-        (event: ChangeEvent<HTMLInputElement>) => {
-            const elementValue: string = event.target.value;
-
-            if (searchType === 'byTyping') {
-                const minCharsToSearch: number =
-                    isNullOrUndefined(props.minCharsToSearch)
-                        ? 3
-                        : props.minCharsToSearch as number;
-
-                if (elementValue.length >= minCharsToSearch) {
-                    props.onSearch(elementValue);
-                }
-            }
-
-            setSearchValue(elementValue);
-        }, [props, searchType]);
-
-    const onSearchButtonClick = useCallback(
-        () => {
-            props.onSearch(searchValue);
-        }, [props, searchValue]);
-
-    const className: string = 'app-search control'
-        + ` is-${(props.size || 'normal')}`
-        + (props.isLoading === true ? ' is-loading' : '')
-        + (searchType === 'byButton' ? ' is-expanded': '')
-        ;
-
-    const inputClassName: string = 'input is-unselectable'
-        + ` is-${(props.size || 'normal')}`
-        + (props.rounded === true ? ' is-rounded' : '')
-        ;
-
-    if (searchType === 'byButton') {
-        return (
-            <div className="field has-addons">
-                <div className={className}>
-                    <input
-                        type='search'
-                        name={name}
-                        defaultValue={searchValue}
-                        className={inputClassName}
-                        disabled={props.disabled}
-                        onChange={onChange}
-                        placeholder={props.caption}
-                    />
-                </div>
-                <div className="control">
-                    <Button
-                        caption="Search"
-                        type="info"
-                        onClick={onSearchButtonClick}
-                        isLoading={props.isLoading}
-                    />
-                </div>
-            </div>
-        );
-    }
-    else {
-        return (
-            <div className={className}>
-                <input
-                    type='search'
-                    name={name}
-                    defaultValue={searchValue}
-                    className={inputClassName}
-                    disabled={props.disabled}
-                    onChange={onChange}
-                    placeholder={props.caption}
-                />
-            </div>
-        );
-    }
-}

package/src/hooks/useComponentOutsideClick.ts

@@ -1,48 +0,0 @@
-import { DependencyList, useCallback, useEffect } from "react";
-
-import { isNull, isNullOrUndefined } from "@bodynarf/utils/common";
-
-/**
- * Subscribe to component outside click
- * @param selector Component root selector
- * @param clickHandleCondition Condition to handle document click
- * @param clickHandleChange Handler of outside component click
- * @param clickListenCondition Condition to start listening document clicks
- * @param dependencies Additional dependencies to update hook
- */
-export const useComponentOutsideClick = (
-    selector: string,
-    clickHandleCondition: boolean,
-    clickHandleChange: () => void,
-    clickListenCondition?: boolean,
-    dependencies?: DependencyList
-): void => {
-    const onDocumentClick = useCallback(
-        (event: MouseEvent): void => {
-            if (clickHandleCondition) {
-                const target: HTMLElement = event.target as HTMLElement;
-
-                if (isNullOrUndefined(target)) {
-                    return;
-                }
-
-                const relatedComponent: Element | null =
-                    target.closest(selector);
-
-                if (isNull(relatedComponent)) {
-                    clickHandleChange();
-                }
-            }
-            // eslint-disable-next-line react-hooks/exhaustive-deps
-        }, [clickHandleCondition, selector, clickHandleChange, dependencies]);
-
-    useEffect(() => {
-        if (isNullOrUndefined(clickListenCondition) || clickListenCondition === true) {
-            document.addEventListener('click', onDocumentClick);
-
-            return (): void => document.removeEventListener('click', onDocumentClick);
-        }
-
-        return () => { };
-    }, [clickListenCondition, onDocumentClick]);
-};

package/src/main.tsx

@@ -1,9 +0,0 @@
-import { createRoot } from "react-dom/client";
-
-import "bootstrap-icons/font/bootstrap-icons.css";
-import "bulma/bulma.sass";
-
-const container = document.getElementById("root");
-
-const root = createRoot(container!); // createRoot(container!) if you use TypeScript
-root.render(<div> Components </div>);

package/text.ts

@@ -1,7 +0,0 @@
-import Text, { TextProps } from "src/components/primitives/text";
-
-export default Text;
-
-export {
-    TextProps,
-};

package/tsconfig.json

@@ -1,39 +0,0 @@
-{
-	"compilerOptions": {
-		"target": "ESNext",
-		"useDefineForClassFields": true,
-		"lib": [
-			"DOM",
-			"DOM.Iterable",
-			"ESNext"
-		],
-		"allowJs": false,
-		"skipLibCheck": false,
-		"esModuleInterop": false,
-		"allowSyntheticDefaultImports": true,
-		"strict": true,
-		"noImplicitAny": true,
-		"noImplicitThis": true,
-		"alwaysStrict": true,
-		"forceConsistentCasingInFileNames": true,
-		"module": "ESNext",
-		"moduleResolution": "Node",
-		"resolveJsonModule": true,
-		"noEmit": true,
-		"jsx": "react-jsx",
-		"downlevelIteration": true,
-		"noUnusedLocals": true,
-		"noUnusedParameters": true,
-		"noImplicitReturns": true,
-		"baseUrl": "./",
-	},
-	"include": [
-		"src",
-		"./"
-	],
-	"references": [
-		{
-			"path": "./tsconfig.node.json"
-		}
-	],
-}

package/tsconfig.node.json

@@ -1,8 +0,0 @@
-{
-  "compilerOptions": {
-    "composite": true,
-    "module": "esnext",
-    "moduleResolution": "node"
-  },
-  "include": ["vite.config.ts"]
-}