@bodynarf/react.components 0.1.0

package/src/components/primitives/types.ts

@@ -0,0 +1,65 @@
+import { BaseElementProps } from "../types";
+
+/** Base properties for input components */
+export type BaseInputElementProps<TValue> = 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?: InputSize;
+
+    /** Label configuration */
+    label?: InputLabel;
+
+    /** Displaying loading state of component as spinner in right end of component */
+    loading?: boolean;
+
+    /** Style. Colors the border */
+    style?: InputColor;
+
+    /** Name of element. Required for form elements */
+    name?: string;
+};
+
+/** Input label configuration */
+export type InputLabel = {
+    /** Label textual content to describe input requirements */
+    caption: string;
+
+    /** Should component be on same line with label */
+    horizontal?: boolean;
+};
+
+/** Input component size variety */
+export type InputSize =
+    | 'small'
+    | 'normal'
+    | 'medium'
+    | 'large'
+    ;
+
+/** Input component border-color type */
+export type InputColor =
+    | 'default' /** color: transparent */
+    | 'primary' /** color: seawave green */
+    | 'link' /** color: blue-violet */
+    | 'info' /** color: sky-blue */
+    | 'success' /** color: green */
+    | 'warning' /** color: yellow */
+    | 'danger' /** color: red */
+    ;

package/src/components/search/index.tsx

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

@@ -0,0 +1,24 @@
+.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/components/types.ts

@@ -0,0 +1,41 @@
+/** Base interface for component props */
+export type BaseElementProps = {
+    /** Additional class names */
+    className?: string;
+
+    /** Title */
+    title?: string;
+
+    /** Extra data-* attributes */
+    data?: {
+        /**Will add data-{key} attribute to element */
+        [key: string]: any;
+    };
+};
+
+export type IconSize =
+    | 'small'
+    | 'medium' /** default size */
+    | 'large';
+
+export type IconPosition =
+    | 'left'
+    | 'right';
+
+/** Icon for component configuration */
+export type ElementIcon = {
+    /**
+     * Class name for icon.
+     * Used to display icon from bootstrap-icons
+    */
+    className: string;
+
+    /** Icon size */
+    size?: IconSize;
+
+    /**
+     * Position
+     * Works only with other content
+    */
+    position?: IconPosition;
+};

package/src/hooks/useComponentOutsideClick.ts

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

@@ -0,0 +1,9 @@
+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/tsconfig.json

@@ -0,0 +1,48 @@
+{
+	"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

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

package/vite.config.ts

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