@harjs/react-ui 1.0.0

package/dist/components/form/select/index.js

@@ -0,0 +1,312 @@
+"use client";
+import React, { useEffect, useRef, useState, useMemo } from "react";
+import Input from "../input";
+import "../../../assets/css/components/form/select/styles.css";
+import Chip from "../../data-display/chip";
+import Checkbox from "../checkbox";
+import Utils from "../../../libs/infrastructure/shared/Utils";
+import ReactDOM from "react-dom";
+const Select = ({ variant = "outlined", status, color, border = { radius: "sm" }, style, options, value, onChange, onSearch, onClick, onCreate, multiple, placeholder, validation, upperCase, disabled, readOnly, config = { clear: true, validation: { text: "visible" } }, }) => {
+    const _selectionClassName = ["selections"];
+    // refs
+    const _arSelect = useRef(null);
+    const _singleInput = useRef(null);
+    const _multipleInput = useRef(null);
+    const _placeholder = useRef(null);
+    const _options = useRef(null);
+    const _optionItems = useRef([]);
+    const _searchField = useRef(null);
+    let _otoFocus = useRef(null).current;
+    let _navigationIndex = useRef(0);
+    // states
+    const [optionsOpen, setOptionsOpen] = useState(false);
+    const [filteredOptions, setFilteredOptions] = useState(() => options ?? []);
+    const [isSearchTextEqual, setIsSearchTextEqual] = useState(false);
+    const [searchText, setSearchText] = useState("");
+    const [singleInputText, setSingleInputText] = useState("");
+    const [navigationIndex, setNavigationIndex] = useState(0);
+    // options referans kararlılığı için JSON key
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const optionsKey = useMemo(() => JSON.stringify(options), [options]);
+    _selectionClassName.push(...Utils.GetClassName(variant, undefined, validation?.text ? "red" : "light", border, undefined, undefined, undefined));
+    // methods
+    const handleClickOutSide = (event) => {
+        const target = event.target;
+        if (_arSelect.current && !_arSelect.current.contains(target))
+            setOptionsOpen(false);
+    };
+    const handleKeys = (event) => {
+        const key = event.key;
+        const optionItems = _optionItems.current.filter((optionItem) => optionItem !== null);
+        if (key === "ArrowUp" || key === "ArrowLeft") {
+            setNavigationIndex((prev) => {
+                const result = prev > 0 ? prev - 1 : optionItems.length - 1;
+                _navigationIndex.current = result;
+                return result;
+            });
+        }
+        else if (key === "ArrowDown" || key === "ArrowRight") {
+            setNavigationIndex((prev) => {
+                const result = prev === optionItems.length - 1 ? 0 : prev + 1;
+                _navigationIndex.current = result;
+                return result;
+            });
+        }
+        else if (key === "Enter") {
+            if (_navigationIndex.current === -1)
+                return;
+            optionItems[_navigationIndex.current]?.click();
+        }
+        else if (key === "Escape") {
+            setOptionsOpen(false);
+        }
+    };
+    const handlePosition = () => {
+        if (_options.current) {
+            const optionRect = _options.current.getBoundingClientRect();
+            const InpuRect = _singleInput.current
+                ? _singleInput.current.getBoundingClientRect()
+                : _multipleInput.current?.getBoundingClientRect();
+            if (InpuRect) {
+                const screenCenter = window.innerHeight / 2;
+                const sx = window.scrollX || document.documentElement.scrollLeft || document.body.scrollLeft;
+                const sy = window.scrollY || document.documentElement.scrollTop || document.body.scrollTop;
+                _options.current.style.visibility = "visible";
+                _options.current.style.opacity = "1";
+                _options.current.style.top = `${(InpuRect.top > screenCenter
+                    ? InpuRect.top - optionRect.height - (multiple ? 0 : 5)
+                    : InpuRect.top + InpuRect.height) + sy}px`;
+                _options.current.style.left = `${InpuRect.left + sx}px`;
+                _options.current.style.minWidth = "200px";
+                _options.current.style.width = `${InpuRect.width}px`;
+            }
+        }
+    };
+    const handleItemSelected = (option) => {
+        if (multiple) {
+            const hasItem = value.some((item) => item.value === option.value && item.text === option.text);
+            if (hasItem)
+                onChange(value.filter((v) => !(v.value === option.value && v.text === option.text)));
+            else
+                onChange([...value, option]);
+        }
+        else {
+            onChange(option);
+            setOptionsOpen(false);
+        }
+    };
+    const handleCleanSelection = () => {
+        if (multiple) {
+            if (_searchField.current)
+                setSearchText("");
+            onChange([]);
+        }
+        else {
+            if (_singleInput.current) {
+                setSingleInputText("");
+                _singleInput.current.placeholder = `${validation ? "* " : ""}${placeholder ?? ""}`;
+            }
+            onChange(undefined);
+        }
+        setOptionsOpen(false);
+    };
+    const createField = () => {
+        if (!onCreate)
+            return;
+        return (React.createElement("div", { className: "no-options-field", onClick: (event) => {
+                event.stopPropagation();
+                onCreate({ value: "", text: singleInputText });
+                setOptionsOpen(false);
+            } }, options.length === 0 && (singleInputText.length === 0 || searchText.length === 0) ? (React.createElement("span", { className: "text" }, "Herhangi bir kay\u0131t bulunumad\u0131.")) : (React.createElement("span", { className: "add-item" },
+            React.createElement("span", { className: "plus" }, "+"),
+            singleInputText.length !== 0 ? singleInputText : searchText))));
+    };
+    const convertToUpperCase = (str) => {
+        return str
+            .replace(/ş/g, "S")
+            .replace(/Ş/g, "S")
+            .replace(/ı/g, "I")
+            .replace(/I/g, "I")
+            .replace(/ç/g, "C")
+            .replace(/Ç/g, "C")
+            .replace(/ğ/g, "G")
+            .replace(/Ğ/g, "G")
+            .replace(/ö/g, "O")
+            .replace(/Ö/g, "O")
+            .replace(/ü/g, "U")
+            .replace(/Ü/g, "U")
+            .replace(/[a-z]/g, (match) => match.toUpperCase());
+    };
+    // value değiştiğinde input metnini güncelle
+    useEffect(() => {
+        if (multiple)
+            setSearchText("");
+        else
+            setSingleInputText(value?.text ?? "");
+    }, [value, multiple]);
+    // options dışarıdan değiştiğinde filtreyi güncelle (searchText ile uyumlu)
+    useEffect(() => {
+        setFilteredOptions((options ?? []).filter((option) => option.text.toLocaleLowerCase().includes(searchText.toLocaleLowerCase())));
+        setIsSearchTextEqual((options ?? []).some((option) => option.text.toLocaleLowerCase() === searchText.toLocaleLowerCase()));
+        // optionsKey kullanarak referans karşılaştırması yerine içerik karşılaştırması yapıyoruz
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [optionsKey]);
+    // options paneli açılıp kapandığında
+    useEffect(() => {
+        if (optionsOpen) {
+            setTimeout(() => handlePosition(), 0);
+            if (!multiple && _singleInput.current) {
+                setSingleInputText("");
+                _singleInput.current.placeholder = value?.text || `${validation ? "* " : ""}${placeholder ?? ""}` || "";
+            }
+            _otoFocus = setTimeout(() => {
+                if (_searchField.current)
+                    _searchField.current.focus();
+            }, 250);
+            window.addEventListener("blur", handleBlur);
+            document.addEventListener("click", handleClickOutSide);
+            document.addEventListener("keydown", handleKeys);
+        }
+        else {
+            setTimeout(() => setSearchText(""), 300);
+            if (multiple) {
+                if (_searchField.current)
+                    _searchField.current.value = "";
+            }
+            else {
+                if (_singleInput.current) {
+                    setSingleInputText(value?.text ?? "");
+                    _singleInput.current.placeholder = `${validation ? "* " : ""}${placeholder ?? ""}`;
+                }
+            }
+        }
+        return () => {
+            _otoFocus && clearTimeout(_otoFocus);
+            window.removeEventListener("blur", handleBlur);
+            document.removeEventListener("click", handleClickOutSide);
+            document.removeEventListener("keydown", handleKeys);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [optionsOpen]);
+    // arama metni değiştiğinde filtrele
+    useEffect(() => {
+        if (searchText.length > 0 && onSearch) {
+            onSearch(searchText);
+        }
+        else {
+            setFilteredOptions((options ?? []).filter((option) => {
+                if (!optionsOpen)
+                    return true;
+                return option.text.toLocaleLowerCase().includes(searchText.toLocaleLowerCase());
+            }));
+            setIsSearchTextEqual((options ?? []).some((option) => {
+                if (!optionsOpen)
+                    return false;
+                return option.text.toLocaleLowerCase() === searchText.toLocaleLowerCase();
+            }));
+        }
+        setNavigationIndex(0);
+        _navigationIndex.current = 0;
+        const optionItems = _optionItems.current.filter((item) => item !== null);
+        optionItems[_navigationIndex.current]?.classList.add("navigate-with-arrow-keys");
+        setTimeout(() => handlePosition(), 0);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [searchText]);
+    // klavye navigasyonu highlight
+    useEffect(() => {
+        _optionItems.current
+            .filter((item) => item !== null)
+            .forEach((item, index) => {
+            if (index === navigationIndex) {
+                item?.classList.add("navigate-with-arrow-keys");
+                item.scrollIntoView({ behavior: "smooth", block: "nearest" });
+            }
+            else {
+                item?.classList.remove("navigate-with-arrow-keys");
+            }
+        });
+    }, [navigationIndex]);
+    const handleBlur = () => setOptionsOpen(false);
+    return (React.createElement("div", { ref: _arSelect, className: "ar-select-wrapper" },
+        React.createElement("div", { ref: _multipleInput, className: "ar-select" },
+            multiple ? (React.createElement("div", { className: "wrapper" },
+                React.createElement("div", { ...(value.length > 0
+                        ? {
+                            style: {
+                                clipPath: `polygon(
+                            -15px 0,
+                            10px -5px,
+                            10px 5px,
+                            calc(${_placeholder.current?.getBoundingClientRect().width}px + 7px) 5px,
+                            calc(${_placeholder.current?.getBoundingClientRect().width}px + 7px) -5px,
+                            100% -70px,
+                            calc(100% + 5px) calc(100% + 5px),
+                            -5px calc(100% + 5px)
+                          )`,
+                            },
+                        }
+                        : {}), className: _selectionClassName.join(" "), onClick: () => {
+                        onClick && onClick();
+                        setOptionsOpen((prev) => !prev);
+                    } },
+                    React.createElement("div", { className: "items" }, value.map((_value, index) => (React.createElement(Chip, { key: index, variant: status?.selected?.variant || "filled", color: status?.selected?.color || status?.color, text: _value.text }))))),
+                React.createElement("span", { ref: _placeholder, className: `placeholder ${value.length > 0 ? "visible" : "hidden"}`, onClick: () => {
+                        onClick && onClick();
+                        setOptionsOpen((prev) => !prev);
+                    } },
+                    validation ? "* " : "",
+                    placeholder))) : (React.createElement(Input, { ref: _singleInput, style: { ...style, paddingRight: config.clear === false ? "1.5rem" : "3.5rem" }, variant: variant, color: !Utils.IsNullOrEmpty(validation?.text) ? "red" : color, border: { radius: border.radius }, value: singleInputText, onClick: () => {
+                    onClick && onClick();
+                    setOptionsOpen((prev) => !prev);
+                }, onChange: (event) => {
+                    !optionsOpen && setOptionsOpen(true);
+                    if (upperCase)
+                        event.target.value = convertToUpperCase(event.target.value);
+                    setSingleInputText(event.target.value);
+                }, onKeyUp: (event) => {
+                    if (event.key === "Enter")
+                        return;
+                    setSearchText(event.currentTarget.value);
+                }, placeholder: placeholder, validation: {
+                    ...validation,
+                    text: config.validation?.text === "visible" ? validation?.text : "",
+                }, disabled: disabled, readOnly: readOnly })),
+            React.createElement("div", { className: "buttons" },
+                config?.clear === true && (React.createElement("span", { className: `button-clear ${!disabled && (multiple ? value.length > 0 : value) ? "opened" : "closed"}`, onClick: (event) => {
+                        if (disabled)
+                            return;
+                        event.stopPropagation();
+                        handleCleanSelection();
+                    } })),
+                React.createElement("span", { className: `angel-down ${!disabled && optionsOpen ? "opened" : "closed"}`, onClick: (event) => {
+                        if (disabled)
+                            return;
+                        onClick && onClick();
+                        event.stopPropagation();
+                        setOptionsOpen((prev) => !prev);
+                    } })),
+            multiple && validation && config.validation?.text === "visible" && (React.createElement("span", { className: "validation" }, validation.text))),
+        !disabled &&
+            optionsOpen &&
+            ReactDOM.createPortal(React.createElement("div", { ref: _options, className: "ar-select-options" },
+                multiple && (React.createElement("div", { className: "search-field" },
+                    React.createElement(Input, { ref: _searchField, variant: "outlined", placeholder: "Search...", value: searchText, onChange: (event) => setSearchText(event.target.value), onClick: (event) => event.stopPropagation() }))),
+                filteredOptions.length > 0 ? (React.createElement("ul", null,
+                    onCreate && !isSearchTextEqual && searchText.length > 0 && React.createElement("li", null, createField()),
+                    filteredOptions.map((option, index) => {
+                        const isItem = multiple && value.some((_value) => _value.value === option.value);
+                        return (React.createElement("li", { key: index, ref: (element) => {
+                                if (!element)
+                                    return;
+                                _optionItems.current[index] = element;
+                            }, className: option === value ? "selectedItem" : "", onClick: (event) => {
+                                event.stopPropagation();
+                                handleItemSelected(option);
+                            } },
+                            multiple && React.createElement(Checkbox, { checked: isItem, color: isItem ? "blue" : "light", disabled: true }),
+                            React.createElement("span", null, option.text)));
+                    }))) : !onCreate ? (React.createElement("div", { className: "no-options-field" },
+                    React.createElement("span", { className: "text" }, "Herhangi bir kay\u0131t bulunumad\u0131."))) : (createField())), document.body)));
+};
+Select.displayName = "Select";
+export default Select;

package/dist/components/form/switch/IProps.d.ts

@@ -0,0 +1,5 @@
+import { IBorderProps, IColorProps, IDisabledProps, IIconProps, ISizeProps, IUpperCaseProps, IValidationProps, IVariantProps } from "../../../libs/infrastructure/types/IGlobalProps";
+interface IProps extends IVariantProps, IColorProps, IBorderProps, IIconProps, ISizeProps, IUpperCaseProps, IValidationProps, IDisabledProps, Omit<React.InputHTMLAttributes<HTMLInputElement>, "children" | "size" | "color"> {
+    label?: string;
+}
+export default IProps;

package/dist/components/form/switch/IProps.js

@@ -0,0 +1 @@
+export {};

package/dist/components/form/switch/index.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import "../../../assets/css/components/form/switch/styles.css";
+import IProps from "./IProps";
+declare const Switch: React.ForwardRefExoticComponent<IProps & React.RefAttributes<HTMLInputElement>>;
+export default Switch;

package/dist/components/form/switch/index.js

@@ -0,0 +1,36 @@
+"use client";
+import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
+import "../../../assets/css/components/form/switch/styles.css";
+import Utils from "../../../libs/infrastructure/shared/Utils";
+const Switch = forwardRef(({ label, color, border = { radius: "pill" }, ...attributes }, ref) => {
+    // refs
+    let _switchInput = useRef(null);
+    let _switch = useRef(null);
+    const _inputClassName = [];
+    const _switchClassName = ["ar-switch"];
+    // states
+    const [checked, setChecked] = useState(attributes.checked ?? false);
+    _inputClassName.push(attributes.checked ? "checked" : "unchecked");
+    _switchClassName.push(...Utils.GetClassName(undefined, undefined, attributes.checked ? color : "light", border, undefined, undefined, attributes.className));
+    // hooks
+    // Dışarıdan gelen ref'i _innerRef'e bağla.
+    useImperativeHandle(ref, () => _switchInput.current);
+    // useEffects
+    useEffect(() => {
+        setChecked(attributes.checked ?? false);
+    }, [attributes.checked]);
+    return (React.createElement("div", { className: "ar-switch-wrapper" },
+        React.createElement("label", null,
+            React.createElement("input", { ref: _switchInput, type: "checkbox", ...attributes, className: _inputClassName.map((c) => c).join(" "), checked: checked, size: 0, onChange: (event) => {
+                    event.stopPropagation();
+                    (() => {
+                        setChecked(event.target.checked);
+                    })();
+                    (() => attributes.onChange && attributes.onChange(event))();
+                } }),
+            React.createElement("span", { ref: _switch, className: _switchClassName.map((c) => c).join(" ") },
+                React.createElement("span", { className: "handle border-radius-pill" })),
+            label && React.createElement("span", { className: "label" }, label))));
+});
+Switch.displayName = "Switch";
+export default Switch;

package/dist/components/form/text-editor/IProps.d.ts

@@ -0,0 +1,18 @@
+import { IColorProps, IDisabledProps, IValidationProps } from "../../../libs/infrastructure/types/IGlobalProps";
+export interface IProps<T> extends IValidationProps, IColorProps, IDisabledProps {
+    name?: string;
+    value?: string;
+    onChange: (value?: string) => void;
+    dynamicList?: {
+        render: {
+            display: keyof T;
+            items: T[];
+        };
+        triggerKey?: string;
+        onTagged: (tagged: any[]) => void;
+    };
+    height?: number;
+    multilang?: boolean;
+    placeholder?: string;
+}
+export default IProps;

package/dist/components/form/text-editor/IProps.js

@@ -0,0 +1 @@
+export {};

package/dist/components/form/text-editor/index.d.ts

@@ -0,0 +1,5 @@
+import "../../../assets/css/components/form/text-editor/styles.css";
+import IProps from "./IProps";
+import React from "react";
+declare const TextEditor: <T extends object>({ color, name, value, onChange, dynamicList, placeholder, height, validation, disabled, }: IProps<T>) => React.JSX.Element;
+export default TextEditor;