@bodynarf/react.components 1.1.0 → 1.1.5

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 '@app/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/components/search/search.scss

@@ -1,24 +0,0 @@
-.app-search {
-    input[type="search"] {
-        transition: 0.15s ease-out;
-        transition-property: border-color, color, background-color;
-
-        &::placeholder {
-            user-select: none;
-        }
-
-        &::-webkit-input-placeholder {
-            transition: 0.15s ease-out color;
-        }
-
-        &::-webkit-search-cancel-button {
-            cursor: pointer;
-            font-size: 1.25rem;
-        }
-    }
-
-    &.is-loading::after {
-        right: 1rem;
-        top: 0.725rem;
-    }
-}

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 "@app/components/text";
-
-export default Text;
-
-export {
-    TextProps,
-};

package/tsconfig.json

@@ -1,49 +0,0 @@
-{
-	"compilerOptions": {
-		"target": "ESNext",
-		"useDefineForClassFields": true,
-		"lib": [
-			"DOM",
-			"DOM.Iterable",
-			"ESNext"
-		],
-		"allowJs": false,
-		"skipLibCheck": false,
-		"esModuleInterop": false,
-		"allowSyntheticDefaultImports": true,
-		"strict": true,
-		"noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */
-		"noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */
-		"alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */
-		"forceConsistentCasingInFileNames": true,
-		"module": "ESNext",
-		"moduleResolution": "Node",
-		"resolveJsonModule": true,
-		// "isolatedModules": true,
-		"noEmit": true,
-		"jsx": "react-jsx",
-		"downlevelIteration": true,
-		"noUnusedLocals": true, /* Report errors on unused locals. */
-		"noUnusedParameters": true, /* Report errors on unused parameters. */
-		"noImplicitReturns": true, /* Report error when not all code paths in function return a value. */
-		"baseUrl": "./", /* Base directory to resolve non-absolute module names. */
-		"paths": {
-			"@app/components/*": [
-				"src/components/*",
-				"src/components/primitives/*"
-			],
-			"@app/hooks/*": [
-				"src/hooks/*"
-			],
-		},
-	},
-	"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"]
-}

package/vite.config.ts

@@ -1,14 +0,0 @@
-import { defineConfig, splitVendorChunkPlugin  } from 'vite';
-
-import react from '@vitejs/plugin-react';
-
-// https://vitejs.dev/config/
-export default defineConfig({
-	plugins: [
-		splitVendorChunkPlugin(),
-		react(),
-	],
-	build: {
-		sourcemap: true,
-	}
-});