naria-ui 0.1.52 → 0.1.54

package/assets/icons/angle-down.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" fill="currentColor"><path fill="currentColor" d="M209.5 369c-9.4 9.4-24.6 9.4-33.9 0L15.5 209c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l143 143 143-143c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-160 160z"/></svg>

package/assets/icons/angle-left.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512" fill="currentColor"><path fill="currentColor" d="M15.5 239c-9.4 9.4-9.4 24.6 0 33.9l160 160c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-143-143 143-143c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0L15.5 239z"/></svg>

package/assets/icons/angle-right.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512" fill="currentColor"><path fill="currentColor" d="M241.5 239c9.4 9.4 9.4 24.6 0 33.9L81.5 433c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l143-143-143-143c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l160 160z"/></svg>

package/assets/icons/angle-up.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" fill="currentColor"><path fill="currentColor" d="M175.5 143c9.4-9.4 24.6-9.4 33.9 0l160 160c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-143-143-143 143c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l160-160z"/></svg>

package/assets/icons/close.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" fill="currentColor"><path fill="currentColor" d="M7.5 105c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l151 151 151-151c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-151 151 151 151c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-151-151-151 151c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l151-151-151-151z"/></svg>

package/assets/icons/search.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor"><path fill="currentColor" d="M368 208a160 160 0 1 0 -320 0 160 160 0 1 0 320 0zM337.1 371.1C301.7 399.2 256.8 416 208 416 93.1 416 0 322.9 0 208S93.1 0 208 0 416 93.1 416 208c0 48.8-16.8 93.7-44.9 129.1L505 471c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0L337.1 371.1z"/></svg>

package/eslint.config.js

@@ -0,0 +1,28 @@
+// For more info, see https://github.com/storybookjs/eslint-plugin-storybook#configuration-flat-config-format
+import storybook from "eslint-plugin-storybook";
+
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config({ ignores: ['dist'] }, {
+  extends: [js.configs.recommended, ...tseslint.configs.recommended],
+  files: ['**/*.{ts,tsx}'],
+  languageOptions: {
+    ecmaVersion: 2020,
+    globals: globals.browser,
+  },
+  plugins: {
+    'react-hooks': reactHooks,
+    'react-refresh': reactRefresh,
+  },
+  rules: {
+    ...reactHooks.configs.recommended.rules,
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}, storybook.configs["flat/recommended"]);

package/hooks/click-outside.ts

@@ -0,0 +1,17 @@
+import { RefObject, useEffect } from 'react';
+
+const useClickOutside = <T extends HTMLElement>(ref: RefObject<T>, buttonRef: RefObject<T>, fn: () => void) => {
+    useEffect(() => {
+        function handleClickOutside(event: Event) {
+            if (buttonRef.current && !buttonRef.current.contains(event.target as Node | null) && ref?.current && !ref?.current.contains(event.target as Node | null)) {
+                fn();
+            }
+        }
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [ref, fn]);
+};
+
+export default useClickOutside;

package/hooks/is-first-render.ts

@@ -0,0 +1,7 @@
+import {useEffect, useState} from 'react';
+
+export const useIsFirstRender = () => {
+    const [isFirst, setIsFirst] = useState(true);
+    useEffect(() => { setIsFirst(false) }, [])
+    return isFirst
+}

package/hooks/use-width.ts

@@ -0,0 +1,11 @@
+import {useEffect, useState} from "react";
+
+export const useWidth = () => {
+    const [width, setWidth] = useState(typeof window !== "undefined" ? window.innerWidth : 0);
+    const handleResize = () => setWidth(typeof window !== "undefined" ? window.innerWidth : 0);
+    useEffect(() => {
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    }, [width]);
+    return width;
+};

package/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/lib/components/Button/Button.tsx

@@ -0,0 +1,47 @@
+import React, {FC, ReactNode} from "react";
+import './button.scss';
+import Loading from "../../../shared/loading/Loading";
+
+export interface props extends React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
+    type?: "button" | "submit";
+    classNames?: {
+        button: string;
+        loading: {
+            wrapper: string;
+            color: string;
+        };
+    };
+    value: string;
+    isLoading?: boolean;
+    isDisabled?: boolean;
+    icon?: ReactNode;
+}
+
+export const Button: FC<props> = ({
+                                      type = "button",
+                                      classNames = {
+                                          button: "",
+                                          loading: {
+                                              wrapper: "",
+                                              color: ""
+                                          }
+                                      },
+                                      value,
+                                      icon = null,
+                                      isLoading = false,
+                                      isDisabled = false,
+                                      ...otherProps
+                                  }) => {
+
+    return (
+        <button type={type} disabled={isDisabled} {...otherProps}
+                className={`nariaButton ${isDisabled ? "nariaButton-disabled" : ""} ${classNames?.button}`}
+                data-prop="button"
+        >{isLoading ? <Loading classNames={{
+            wrapper: classNames.loading.wrapper,
+            color: classNames.loading.color
+        }} data-prop-wrapper = "wrapper" data-prop-color = "color" /> : icon}{value}</button>
+    );
+};
+
+

package/lib/components/Button/button.scss

@@ -0,0 +1,9 @@
+.nariaButton {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  .nariaLoading {
+    width: 14px;
+    height: 14px;
+  }
+}

package/lib/components/Button/index.ts

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

package/lib/components/Input/Input.tsx

@@ -0,0 +1,66 @@
+import {FC} from "react";
+
+export interface props {
+    type?: "password" | "text";
+    classNames?: {
+        wrapper?: string;
+        label?: string;
+        title?: string;
+        input?: string;
+        errorText?: string;
+    };
+    placeholder: string;
+    title: string;
+    hasError?: string | null;
+    register?: any;
+    name?: string;
+    isDisabled?: boolean;
+    autocomplete?: boolean;
+}
+
+export const Input: FC<props> = ({
+                                     type = "text",
+                                     placeholder,
+                                     classNames = {
+                                         wrapper: "",
+                                         label: "",
+                                         title: "",
+                                         input: "",
+                                         errorText: "",
+                                     },
+                                     title,
+                                     hasError,
+                                     register, name,
+                                     isDisabled = false,
+                                     autocomplete = false,
+                                     ...otherProps
+                                 }) => {
+
+    return (
+        <div className={`nariaInputWrapper ${classNames.wrapper}`} data-prop = "wrapper">
+            <label
+                htmlFor={name}
+                className={`${classNames.label} ${hasError && "nariaInputLabel-error"}`} data-prop = "label">
+                <span className={classNames?.title} data-prop="title">{title}</span>
+                <input
+                    disabled={isDisabled}
+                    autoComplete={autocomplete ? "on" : "off"}
+                    id={name}
+                    {...register}
+                    {...otherProps}
+                    type={type}
+                    name={name}
+                    className={`${classNames.input} ${hasError && "nariaInput-error"}`}
+                    placeholder={placeholder}
+                    data-prop = "input"
+                />
+            </label>
+            {
+                hasError &&
+                <p className={`nariaInputErrorText ${classNames?.errorText}`} data-prop = "errorText">{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,414 @@
+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;
+    classNames?: {
+        wrapper: string;
+        label?: string;
+        title?: string;
+        button?: string;
+        input?: string;
+        listWrapper?: string;
+        list?: string;
+        option?: string;
+        optionActive?: string;
+        mobileHeader?: string;
+        errorText?: string;
+    };
+    onSelectChange?: any;
+}
+
+export const Select: FC<props> = ({
+                                      options,
+                                      label,
+                                      hasError,
+                                      title,
+                                      value,
+                                      api,
+                                      selected,
+                                      placeholder,
+                                      disabled = false,
+                                      pagination,
+                                      optionFilterLabel,
+                                      hasSearch = false,
+                                      classNames = {
+                                          wrapper: "",
+                                          label: "",
+                                          title: "",
+                                          button: "",
+                                          input: "",
+                                          listWrapper: "",
+                                          list: "",
+                                          option: "",
+                                          optionActive: "",
+                                          mobileHeader: "",
+                                          errorText: "",
+                                      },
+                                      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 `nariaSelectOption-active ${classNames?.optionActive}`
+        }
+        if (item === localSelected) {
+            return `nariaSelectOption-active ${classNames?.optionActive}`
+        }
+    }
+    const onScroll = (e) => {
+        if (api?.length && 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[(optionFilterLabel?.length ? optionFilterLabel : 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' : ''} ${classNames?.wrapper}`}
+             data-prop="wrapper">
+            <label
+                className={`${hasError && "!text-danger-100"}
+                ${classNames?.label}`} data-prop="label">
+                <span className={classNames?.title} data-prop="title">{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"} ${classNames?.input}`}
+                                   value={searchTerm}
+                                   disabled={disabled} type="text" onClick={onToggle} onChange={onSearch}
+                                   data-prop="input"/>
+                            {
+                                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"} ${classNames?.button}`}
+                                data-prop="button"
+                                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" : ""} ${classNames?.listWrapper}`}
+                        data-prop="listWrapper"
+                        ref={wrapperRef}>
+                        <div
+                            className={`nariaList ${getDeviceWidth < 768 ? "nariaList-mobile" : `nariaList-desktop`} ${classNames?.list}`}
+                            data-prop="input"
+                            onScroll={onScroll}>
+                            {
+                                api && isLoading ? (
+                                    <div className="nariaLoadingWrapper">
+                                        <Loading/>
+                                    </div>
+                                ) : (
+                                    <>
+                                        {
+                                            getDeviceWidth < 768 ? (
+                                                <div className={`nariaSelectMobileHeader ${classNames?.mobileHeader}`}
+                                                     data-prop="mobileHeader">
+                                                    {
+                                                        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"} ${classNames?.input}`}
+                                                                       data-prop="input"
+                                                                       value={searchTerm}
+                                                                       disabled={disabled} type="text"
+                                                                       onChange={onSearch}/>
+                                                                <Search
+                                                                    className="nariaSearchIcon"/>
+                                                            </div>
+                                                        ) : undefined
+                                                    }
+                                                    <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={`nariaSelectOption ${classNames?.option} ${getActiveClass(item)}`}
+                                                                        data-prop="option"
+                                                                        data-prop-active="optionActive">
+                                                                    {value?.length ? item[value] : item}
+                                                                </button>
+                                                            )
+                                                        })
+                                                    }
+                                                </>
+                                            ) : (
+                                                <div>
+                                                    No Data
+                                                </div>
+                                            )
+                                        }
+
+
+                                        {
+                                            localPagination.isLoading ? (
+                                                <div className="nariaLoadingMoreWrapper">
+                                                    <Loading/>
+                                                </div>
+                                            ) : undefined
+                                        }
+                                    </>
+                                )
+                            }
+                        </div>
+                    </div>
+                ) : undefined
+            }
+            {
+                hasError &&
+                <p className={`nariaSelectErrorText ${classNames?.errorText}`} data-prop = "errorText">{hasError}</p>
+            }
+
+        </div>
+    );
+};

package/lib/components/Select/index.ts

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