naria-ui 0.1.36 → 0.1.38

package/lib/components/Button/Button.tsx

@@ -0,0 +1,16 @@
+import React, {FC} from "react";
+
+export interface props extends React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
+  type?: "button" | "submit";
+  value: string;
+}
+export const Button: FC<props> = ({type = "button", value}) => {
+
+  return (
+    <button type={type}>
+      {value}
+    </button>
+  );
+};
+
+

package/lib/components/Button/index.ts

@@ -0,0 +1 @@
+export { Button } from './Button';

package/lib/components/Input/Input.tsx

@@ -0,0 +1,59 @@
+import {FC} from "react";
+
+export interface props {
+    type?: "password" | "text";
+    wrapperClass?: string;
+    labelClass?: string;
+    inputClass?: string;
+    errorClass?: string;
+    placeholder: string;
+    label: string;
+    hasError?: string | null;
+    register?: any;
+    name?: string;
+    isDisabled?: boolean;
+    autocomplete?: boolean;
+}
+
+export const Input: FC<props> = ({
+                                     type = "text",
+                                     placeholder,
+                                     wrapperClass = "",
+                                     labelClass = "",
+                                     inputClass = "",
+                                     errorClass = "",
+                                     label,
+                                     hasError,
+                                     register, name,
+                                     isDisabled = false,
+                                     autocomplete = false,
+                                     ...otherProps
+                                 }) => {
+
+    return (
+        <div className={wrapperClass}>
+            <label
+                htmlFor={name}
+                className={`${labelClass} ${hasError && "error"}`}>
+                {label}
+                <input
+                    disabled={isDisabled}
+                    autoComplete={autocomplete ? "on" : "off"}
+                    id={name}
+                    {...register}
+                    {...otherProps}
+                    type={type}
+                    name={name}
+                    className={`${inputClass} ${hasError && "error"} ${errorClass}`}
+                    placeholder={placeholder}
+                />
+            </label>
+            {
+                hasError &&
+                <p className={errorClass}>{hasError}</p>
+            }
+        </div>
+    );
+};
+
+

package/lib/components/Input/index.ts

@@ -0,0 +1 @@
+export { Input } from './Input';

package/lib/components/Select/Select.tsx

@@ -0,0 +1,380 @@
+import {FC, useEffect, useRef, useState} from "react";
+import AngleDown from "../../../assets/icons/angle-down.svg?react";
+import Close from '../../../assets/icons/close.svg?react';
+import Search from '../../../assets/icons/search.svg?react';
+import {useWidth} from "../../../hooks/use-width";
+import Loading from "../../../shared/loading/Loading";
+import './select.scss';
+import {addNavigation, onHashChanges, removeNavigation} from "../../utils/navigator";
+import useClickOutside from "../../../hooks/click-outside";
+
+interface Pagination {
+    page?: number;
+    pageLabel?: string;
+    size?: number;
+    sizeLabel?: string;
+}
+
+interface SDS extends Pagination {
+    isLoading?: boolean;
+}
+
+export interface props {
+    options?: any[];
+    label?: string;
+    title: string;
+    value?: string;
+    api?: string;
+    hasError?: string | null;
+    selected?: any;
+    placeholder?: string;
+    disabled?: boolean;
+    pagination?: Pagination;
+    optionFilterLabel?: string;
+    hasSearch?: boolean;
+    onSelectChange?: any;
+}
+
+export const Select: FC<props> = ({
+                                      options,
+                                      label,
+                                      hasError,
+                                      title,
+                                      value,
+                                      api,
+                                      selected,
+                                      placeholder,
+                                      disabled = false,
+                                      pagination,
+                                      optionFilterLabel,
+                                      hasSearch = false,
+                                      onSelectChange
+                                  }) => {
+    let isSubscribed = true;
+    const getDeviceWidth = useWidth();
+
+    const isHashChanged = onHashChanges('#select');
+    const [isShow, setIsShow] = useState(false);
+    const [isLoading, setIsLoading] = useState(true);
+    const [localSelected, setLocalSelected] = useState<string | null>(null);
+    const [localOptions, setLocalOptions] = useState(null);
+    const [searchTerm, setSearchTerm] = useState("");
+    const [localPagination, setLocalPagination] = useState<SDS>({
+        page: 1,
+        pageLabel: 'page',
+        size: 20,
+        sizeLabel: 'size',
+        isLoading: false
+    });
+    const localApi = useRef<string | undefined>(undefined);
+    const wrapperRef = useRef(undefined);
+    const handlerRef = useRef(undefined);
+
+    const getData = async () => {
+        if (localApi?.current) {
+            try {
+                const response = await fetch(localApi?.current);
+                if (!response.ok) {
+                    throw new Error(`Response status: ${response.status}`);
+                }
+                return await response.json();
+            } catch (error) {
+                console.error(error.message);
+            }
+        }
+
+    }
+
+    useEffect(() => {
+        return () => {
+            isSubscribed = false;
+        };
+    }, [])
+    useEffect(() => {
+        if (api?.length) {
+            localApi.current = api;
+            if (localApi.current.includes(pagination?.pageLabel || 'page')) {
+                const url = new URL(api);
+                url.searchParams.set(pagination?.pageLabel || 'page', (pagination?.page || localPagination.page).toString());
+                url.searchParams.set(pagination?.sizeLabel || 'size', (pagination?.size || localPagination.size).toString());
+                localApi.current = url.href;
+            }
+            setIsLoading(true);
+            getData().then((res) => {
+                if (isSubscribed) {
+                    setIsLoading(false);
+                    setLocalOptions(res);
+                }
+            })
+        }
+    }, [api, pagination]);
+
+    useEffect(() => {
+        if (localPagination.isLoading) {
+            if (localApi.current.includes(pagination?.pageLabel || 'page')) {
+                const url = new URL(localApi.current);
+                url.searchParams.set(pagination?.pageLabel || 'page', (localPagination.page).toString());
+                localApi.current = url.href;
+            }
+            getData().then((res) => {
+                if (isSubscribed) {
+                    setIsLoading(false);
+                    setLocalPagination({
+                        ...localPagination,
+                        isLoading: false
+                    })
+                    setLocalOptions([
+                        ...localOptions,
+                        ...res
+                    ]);
+                }
+            })
+        }
+    }, [localPagination]);
+    useEffect(() => {
+        if (getDeviceWidth < 768) {
+            if (isShow) {
+                addNavigation('select');
+                document.body.style.overflow = 'hidden';
+                handlerRef.current?.focus();
+            } else {
+                if (window.location.hash && !document.referrer.includes('#')) {
+                    removeNavigation();
+                }
+                document.body.style.overflow = 'auto';
+            }
+        }
+    }, [isShow]);
+
+    useEffect(() => {
+        if (selected && options?.length) {
+            if (options?.find(item => item[label] === selected)) {
+                setLocalSelected(options?.find(item => item[label] === selected));
+            } else {
+                setLocalSelected(selected);
+            }
+        }
+    }, [selected]);
+
+    useEffect(() => {
+        if (localSelected) {
+            if (hasSearch) {
+                if (value?.length && localOptions?.find(item => item[label] === localSelected[label])) {
+                    setSearchTerm(localOptions?.find(item => item[label] === localSelected[label])[value] || '');
+                } else {
+                    setSearchTerm(localSelected);
+                }
+            }
+        }
+    }, [localSelected]);
+
+    useEffect(() => {
+        if (isHashChanged) {
+            setIsShow(false)
+        }
+    }, [isHashChanged])
+
+
+    useEffect(() => {
+        if (options?.length) {
+            setLocalOptions(options)
+        }
+    }, [options]);
+
+    const onToggle = () => {
+        if (hasSearch) {
+            setLocalOptions(options)
+        }
+        setIsShow(prevState => !prevState);
+    }
+    const onClose = () => {
+        if (hasSearch) {
+            setLocalOptions(options)
+            if (typeof localSelected === "string") {
+                setSearchTerm(localSelected);
+            } else {
+                setSearchTerm(localSelected ? localSelected[value] : "")
+            }
+        }
+        setIsShow(false);
+    }
+    const onSelect = (item) => {
+        if (hasSearch) {
+            if (value?.length) {
+                setSearchTerm(item[value]);
+            } else {
+                setSearchTerm(item);
+            }
+        }
+        setLocalSelected(item);
+        onToggle();
+        if (onSelectChange) {
+            onSelectChange(item);
+        }
+    }
+
+    const getActiveClass = (item) => {
+        if (!localSelected) {
+            return "";
+        }
+        if (label?.length && item[label] === localSelected[label]) {
+            return "bg-grey-100"
+        }
+        if (item === localSelected) {
+            return "bg-grey-100"
+        }
+    }
+    const onScroll = (e) => {
+        if (localOptions?.length && !localPagination.isLoading) {
+            const bottom = e.target.offsetHeight + e.target.scrollTop >= e.target.scrollHeight - 100;
+
+            if (bottom) {
+                setLocalPagination({
+                    page: localPagination.page + 1,
+                    isLoading: true
+                })
+            }
+        }
+
+    }
+    const onSearch = (e) => {
+        const tempList = e?.target?.value?.length ? options.filter(val => typeof val === "object" ? val[value].includes(e?.target?.value) : val.includes(e?.target?.value)) : options
+        setLocalOptions(tempList)
+        setSearchTerm(e?.target?.value)
+        if (!isShow) {
+            setIsShow(true)
+        }
+    }
+    useClickOutside(wrapperRef, handlerRef, onClose);
+    return (
+        <div className={`nariaSelect ${disabled ? 'nariaSelect-disabled' : ''}`}>
+            <label
+                className={`cursor-pointer
+                ${hasError && "!text-danger-100"}`}>
+                <span className={``}>{title}</span>
+                {
+                    hasSearch ? (
+                        <div className="nariaSearchInput">
+                            <input ref={handlerRef}
+                                   placeholder={placeholder?.length ? placeholder : "Select"}
+                                   className={`${localSelected ? "text-dark-100" : "text-grey-300"} 
+                                ${hasError && "!border-danger-100 focus:border-danger-100 outline-danger-100"}`}
+                                   value={searchTerm}
+                                   disabled={disabled} type="text" onClick={onToggle} onChange={onSearch}/>
+                            {
+                                isShow ? (
+                                    <Search
+                                        className="nariaSearchIcon"/>
+                                ) : (
+                                    <AngleDown
+                                        className={`nariaArrowIcon ${isShow ? "nariaArrowIcon-rotate-180" : ""}`}/>
+                                )
+                            }
+
+
+                        </div>
+                    ) : (
+                        <button type="button"
+                                ref={handlerRef}
+                                disabled={disabled}
+                                className={`nariaHandler ${localSelected ? "text-dark-100" : "text-grey-300"} 
+                                ${hasError && "!border-danger-100 focus:border-danger-100 outline-danger-100"}`}
+                                onClick={onToggle}>
+                            {
+                                localSelected ? (
+                                    value?.length ? localSelected[value] : localSelected
+                                ) : (placeholder?.length ? placeholder : "Select")
+                            } <AngleDown
+                            className={`nariaArrowIcon ${isShow ? "nariaArrowIcon-rotate-180" : ""}`}/>
+                        </button>
+                    )
+                }
+
+            </label>
+
+            {
+                isShow ? (
+                    <div
+                        className={`nariaListWrapper ${getDeviceWidth < 768 ? "nariaListWrapper-mobile" : ""}`}
+                        ref={wrapperRef}>
+                        {
+                            hasSearch && getDeviceWidth < 768 ? (
+                                <div className="nariaSearchInput">
+                                    <input ref={handlerRef}
+                                           placeholder={placeholder?.length ? placeholder : "Select"}
+                                           className={`${localSelected ? "text-dark-100" : "text-grey-300"} 
+                                ${hasError && "!border-danger-100 focus:border-danger-100 outline-danger-100"}`}
+                                           value={searchTerm}
+                                           disabled={disabled} type="text" onChange={onSearch}/>
+                                    <Search
+                                        className="nariaSearchIcon"/>
+
+
+                                </div>
+                            ) : undefined
+                        }
+                        <div
+                            className={`nariaList ${getDeviceWidth < 768 ? "nariaList-mobile" : `nariaList-desktop`}`}
+                            onScroll={onScroll}>
+                            {
+                                api && isLoading ? (
+                                    <div className="nariaLoadingWrapper">
+                                        <Loading/>
+                                    </div>
+                                ) : (
+                                    <>
+                                        {
+                                            getDeviceWidth < 768 ? (
+                                                <div className="sticky top-0 text-left">
+                                                    <button className="p-3" onClick={onClose} disabled={disabled}>
+                                                        <Close className="w-6"/>
+                                                    </button>
+                                                </div>
+                                            ) : undefined
+                                        }
+                                        {
+                                            localOptions?.length ? (
+                                                <>
+                                                    {
+                                                        localOptions?.map((item, index) => {
+                                                            return (
+                                                                <button type="button" onClick={() => onSelect(item)}
+                                                                        disabled={disabled}
+                                                                        key={index.toString()}
+                                                                        className={`text-right py-2.5 px-4 text-base hover:bg-grey-100 rounded-lg ${getActiveClass(item)}`}>
+                                                                    {value?.length ? item[value] : item}
+                                                                </button>
+                                                            )
+                                                        })
+                                                    }
+                                                </>
+                                            ) : (
+                                                <div>
+                                                    No Data
+                                                </div>
+                                            )
+                                        }
+
+
+                                        {
+                                            localPagination.isLoading ? (
+                                                <div className="nariaLoadingMoreWrapper">
+                                                    <Loading/>
+                                                </div>
+                                            ) : undefined
+                                        }
+                                    </>
+                                )
+                            }
+                        </div>
+                    </div>
+                ) : undefined
+            }
+            {
+                hasError &&
+                <p className="text-xs mt-1 text-danger-100">{hasError}</p>
+            }
+
+        </div>
+    );
+};

package/lib/components/Select/index.ts

@@ -0,0 +1 @@
+export { Select } from './Select';

package/lib/components/Select/select.scss

@@ -0,0 +1,132 @@
+
+.nariaSelect {
+  position: relative;
+
+  .nariaListWrapper {
+    overflow: hidden;
+
+    &.nariaListWrapper-mobile {
+      position: fixed;
+      top: 0;
+      right: 0;
+      height: 100%;
+      width: 100%;
+      z-index: 97;
+    }
+  }
+
+  .nariaList {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    z-index: 99;
+    position: relative;
+    overflow: auto;
+
+    &.nariaList-mobile {
+      position: relative;
+      height: 100%;
+    }
+
+    &.nariaList-desktop {
+      position: absolute;
+      animation: fadeInTranslateY 0.3s ease-out forwards;
+      max-height: 100px;
+    }
+
+    .nariaLoadingWrapper {
+      padding: 24px 0;
+      display: flex;
+      justify-content: center;
+
+    }
+
+    .nariaLoadingMoreWrapper {
+      position: sticky;
+      bottom: 0;
+      text-align: center;
+      width: 100%;
+
+      .nariaLoading {
+        width: 20px;
+      }
+    }
+  }
+
+  .nariaSearchInput {
+    position: relative;
+    display: flex;
+
+    input {
+      width: 100%;
+      padding-right: 20px;
+    }
+
+    .nariaArrowIcon, .nariaSearchIcon {
+      position: absolute;
+      bottom: 0;
+      margin-top: auto;
+      margin-bottom: auto;
+      top: 0;
+      right: 6px;
+      width: 12px;
+      height: 12px;
+    }
+
+  }
+
+  .nariaHandler {
+    position: relative;
+    display: flex;
+    gap: 4px;
+    width: 100%;
+    align-items: center;
+    justify-content: space-between;
+
+    .nariaArrowIcon {
+      width: 12px;
+      height: 12px;
+      transition: transform 0.4s;
+
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      transform: rotate(0deg);
+
+      &.nariaArrowIcon-rotate-180 {
+        -webkit-transform: rotate(180deg);
+        -moz-transform: rotate(180deg);
+        -o-transform: rotate(180deg);
+        -ms-transform: rotate(180deg);
+        transform: rotate(180deg);
+      }
+    }
+  }
+}
+
+html[dir="rtl"] {
+  .nariaSelect {
+    .nariaSearchInput {
+      input {
+        padding-left: 20px;
+        padding-right: 0;
+      }
+      .nariaArrowIcon, .nariaSearchIcon {
+        left: 6px;
+        right: auto;
+      }
+    }
+  }
+}
+
+@keyframes fadeInTranslateY {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

package/lib/components/index.ts

@@ -0,0 +1,3 @@
+export * from './Button'
+export * from './Input'
+export * from './Select'

package/lib/index.ts

@@ -0,0 +1,2 @@
+export * from './components';
+export * from './utils'; 

package/lib/utils/capitalize.ts

@@ -0,0 +1,4 @@
+export function capitalize(str: string): string {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}
+

package/lib/utils/index.ts

@@ -0,0 +1,2 @@
+export * from './capitalize';
+

package/lib/utils/navigator.ts

@@ -0,0 +1,29 @@
+import {useEffect, useState} from "react";
+
+export const removeNavigation = () => {
+    const newUrl = `${window.location.pathname}${window.location.search}`;
+    window.history.replaceState(null, '', newUrl);
+}
+
+export const addNavigation = (state: string) => {
+    window.location.hash = state;
+}
+
+
+export const onHashChanges = (state: string) => {
+    const [isHashChanged, setIsHashChanged] = useState(false)
+    useEffect(() => {
+        const handleHashChange = (e) => {
+            if(window.location.hash !== state) {
+                setIsHashChanged(true);
+            } else {
+                setIsHashChanged(false);
+            }
+        };
+        window.addEventListener('hashchange', handleHashChange);
+        return () => {
+            window.removeEventListener('hashchange', handleHashChange);
+        };
+    }, [])
+    return isHashChanged
+};

package/package.json

@@ -5,7 +5,7 @@
     "name": "Mohammad Mehdi Mohammadi",
     "url": ""
   },
-  "version": "0.1.36",
+  "version": "0.1.38",
   "type": "module",
   "main": "dist/naria-ui.cjs.js",
   "module": "dist/naria-ui.es.js",
@@ -15,11 +15,11 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/naria-ui.es.js",
       "require": "./dist/naria-ui.cjs.js"
-    }
+    },
+    "./dist/*.css": "./dist/*.css",
+    "./assets/*.css": "./assets/*.css"
   },
-  "files": [
-    "dist"
-  ],
+  "files": ["*.md", "dist", "lib", "es"],
   "publishConfig": {
     "access": "public"
   },