npm - naria-ui - Versions diffs - 0.1.54 → 0.1.56 - Mend

naria-ui 0.1.54 → 0.1.56

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (48) hide show

package/dist/lib/components/Button/Button.d.ts +16 -0
package/dist/lib/components/Button/index.d.ts +1 -0
package/dist/lib/components/Input/Input.d.ts +19 -0
package/dist/lib/components/Input/index.d.ts +1 -0
package/dist/lib/components/Select/Select.d.ts +37 -0
package/dist/lib/components/Select/index.d.ts +1 -0
package/dist/lib/components/index.d.ts +3 -0
package/dist/lib/index.d.ts +1 -0
package/dist/naria-ui.cjs.js +26 -0
package/dist/naria-ui.css +1 -0
package/dist/naria-ui.es.js +669 -0
package/package.json +4 -1
package/assets/icons/angle-down.svg +0 -1
package/assets/icons/angle-left.svg +0 -1
package/assets/icons/angle-right.svg +0 -1
package/assets/icons/angle-up.svg +0 -1
package/assets/icons/close.svg +0 -1
package/assets/icons/search.svg +0 -1
package/eslint.config.js +0 -28
package/hooks/click-outside.ts +0 -17
package/hooks/is-first-render.ts +0 -7
package/hooks/use-width.ts +0 -11
package/index.html +0 -13
package/lib/components/Button/Button.tsx +0 -47
package/lib/components/Button/button.scss +0 -9
package/lib/components/Button/index.ts +0 -1
package/lib/components/Input/Input.tsx +0 -66
package/lib/components/Input/index.ts +0 -1
package/lib/components/Select/Select.tsx +0 -414
package/lib/components/Select/index.ts +0 -1
package/lib/components/Select/select.scss +0 -138
package/lib/components/index.ts +0 -3
package/lib/index.ts +0 -1
package/shared/loading/Loading.tsx +0 -35
package/shared/loading/loading.scss +0 -9
package/src/App.css +0 -0
package/src/App.tsx +0 -81
package/src/index.css +0 -0
package/src/main.tsx +0 -7
package/src/vite-env.d.ts +0 -1
package/tsconfig.app.json +0 -34
package/tsconfig.build.json +0 -11
package/tsconfig.json +0 -7
package/tsconfig.node.json +0 -24
package/utils/navigator.ts +0 -29
package/vite.config.ts +0 -50
/package/{public → dist}/light.css +0 -0
/package/{public → dist}/light.scss +0 -0

package/assets/icons/angle-up.svg DELETED Viewed

	@@ -1 +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 DELETED Viewed

	@@ -1 +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 DELETED Viewed

	@@ -1 +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 DELETED Viewed

@@ -1,28 +0,0 @@
-// 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 DELETED Viewed

@@ -1,17 +0,0 @@
-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 DELETED Viewed

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

package/hooks/use-width.ts DELETED Viewed

@@ -1,11 +0,0 @@
-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 DELETED Viewed

@@ -1,13 +0,0 @@
-<!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 DELETED Viewed

@@ -1,47 +0,0 @@
-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 DELETED Viewed

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

package/lib/components/Button/index.ts DELETED Viewed

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

package/lib/components/Input/Input.tsx DELETED Viewed

@@ -1,66 +0,0 @@
-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 DELETED Viewed

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

package/lib/components/Select/Select.tsx DELETED Viewed

@@ -1,414 +0,0 @@
-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 DELETED Viewed

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