naria-ui 0.1.35 → 0.1.37

package/dist/naria-ui.css

@@ -0,0 +1 @@
+.naria-select{position:relative}.naria-select .wrapper{overflow:hidden}.naria-select .wrapper.mobile{position:fixed;top:0;right:0;height:100%;width:100%;z-index:97}.naria-select .list{display:flex;flex-direction:column;width:100%;z-index:99}.naria-select .list.mobile{position:relative;height:100%}.naria-select .list.desktop{overflow:auto;position:absolute;animation:fadeInTranslateY .3s ease-out forwards}.naria-select .backdrop-select{position:fixed;top:0;left:0;bottom:0;width:100%;height:100%;z-index:98;background-color:#0003}@keyframes fadeInTranslateY{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

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,171 @@
+import {FC, useEffect, useState} from "react";
+import AngleDown from "../../../src/assets/icons/angle-down.svg?react";
+import Close from '../../../src/assets/icons/close.svg?react';
+import {useWidth} from "../../../hooks/use-width";
+import Loading from "../../../shared/loading/Loading";
+import './select.scss';
+import {addNavigation, onHashChanges, removeNavigation} from "../../utils/navigator";
+
+export interface props {
+    list?: any[];
+    label?: string;
+    title: string;
+    value?: string;
+    api?: any;
+    maxHeight?: string;
+    theme?: "secondary";
+    hasError?: string | null;
+    size?: "md" | "sm";
+    onSelectChange?: any;
+    selected?: any;
+}
+
+export const Select: FC<props> = ({
+                                      list, label, hasError,
+                                      title, value, api,
+                                      maxHeight = "max-h-64", theme = "secondary", size = "md",
+                                      onSelectChange,
+                                      selected
+                                  }) => {
+    const getDeviceWidth = useWidth();
+    const [isShow, setIsShow] = useState(false);
+    const [isLoading, setIsLoading] = useState(true);
+    const [localSelected, setLocalSelected] = useState(null);
+    const [localList, setLocalList] = useState(null);
+    useEffect(() => {
+        if (api) {
+            setIsLoading(true);
+            api().then((res) => {
+                setIsLoading(false);
+                setLocalList(res?.data?.message ? [] : res.data);
+            })
+        }
+    }, [api]);
+    useEffect(() => {
+        if (getDeviceWidth < 1024) {
+
+            if (isShow) {
+                addNavigation('select');
+                document.body.style.overflow = 'hidden';
+            } else {
+
+                if (window.location.hash && !document.referrer.includes('#')) {
+                    removeNavigation();
+                }
+                document.body.style.overflow = 'auto';
+            }
+        }
+    }, [isShow]);
+
+    useEffect(() => {
+        if (label?.length) {
+            setLocalSelected(localList?.find(item => item[label] === selected));
+        } else {
+            setLocalSelected(selected);
+        }
+    }, [selected, localList]);
+
+    useEffect(() => {
+        if (list?.length) {
+            setLocalList(list)
+        }
+    }, [list]);
+
+    const onToggle = () => {
+        setIsShow(prevState => !prevState);
+    }
+    const onToggleEvent = (e) => {
+        if (e?.target?.className.toString()?.includes('backdrop-select')) {
+            onToggle()
+        }
+    }
+    const onSelect = (item) => {
+        setLocalSelected(item);
+        onToggle();
+        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"
+        }
+    }
+    return (
+        <div className="naria-select">
+            <label
+                className={`cursor-pointer
+                ${hasError && "!text-danger-100"}`}>
+                <span className={``}>{title}</span>
+                <button type="button"
+                        className={`relative z-20 flex items-center mt-1 text-base justify-between gap-2 w-full
+                         ${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
+                        ) : "انتخاب"
+                    } <AngleDown
+                    className={`w-4 h-4 transition ease duration-200 ${!isShow ? "rotate-0" : "rotate-180"}`}/>
+                </button>
+            </label>
+
+            {
+                isShow ? (
+                    <div
+                        className={`wrapper ${getDeviceWidth < 1024 ? "mobile" : ""}`}>
+                        <div
+                            className={`list ${getDeviceWidth < 1024 ? "mobile" : `desktop ${maxHeight}`}`}>
+                            {
+                                api && isLoading ? (
+                                    <div className="py-10 flex justify-center">
+                                        <Loading size="w-7 h-7"/>
+                                    </div>
+                                ) : (
+                                    <>
+                                        {
+                                            getDeviceWidth < 1024 ? (
+                                                <div className="sticky top-0 text-left">
+                                                    <button className="p-3" onClick={onToggle}>
+                                                        <Close className="w-6"/>
+                                                    </button>
+                                                </div>
+                                            ) : undefined
+                                        }
+                                        {
+                                            localList?.map((item, index) => {
+                                                return (
+                                                    <button type="button" onClick={() => onSelect(item)}
+                                                            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>
+                        <div
+                            className={`backdrop-select`}
+                            onClick={onToggleEvent}>
+
+                        </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,52 @@
+.naria-select {
+  position: relative;
+  .wrapper {
+    overflow: hidden;
+    &.mobile {
+      position: fixed;
+      top: 0;
+      right: 0;
+      height: 100%;
+      width: 100%;
+      z-index: 97;
+    }
+  }
+  .list {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    z-index: 99;
+    &.mobile {
+      position: relative;
+      height: 100%;
+    }
+    &.desktop {
+      overflow: auto;
+      position: absolute;
+      animation: fadeInTranslateY 0.3s ease-out forwards;
+    }
+  }
+  .backdrop-select {
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 98;
+    background-color: rgba(0, 0, 0, 0.2);
+  }
+}
+
+
+
+@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 = () => {
+    const [isHashChanged, setIsHashChanged] = useState(false)
+    useEffect(() => {
+        const handleHashChange = (e) => {
+            if(window.location.hash !== "#modal") {
+                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.35",
+  "version": "0.1.37",
   "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", "src"],
   "publishConfig": {
     "access": "public"
   },

package/src/App.tsx

@@ -0,0 +1,15 @@
+import './App.css'
+import {Button, Input, Select} from "../lib";
+
+function App() {
+
+    return (
+        <>
+            <Button value="sadasd"/>
+            <Input placeholder="test" label="test"/>
+            <Select label="id" value="name" list = {[{id: 1, name: "sad"}]} />
+        </>
+    )
+}
+
+export default App

package/src/assets/icons/angle-down.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="currentColor"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M241 337c-9.4 9.4-24.6 9.4-33.9 0L47 177c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l143 143L367 143c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9L241 337z"/></svg>

package/src/assets/icons/angle-left.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Pro 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc. --><path d="M47 239c-9.4 9.4-9.4 24.6 0 33.9L207 433c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9L97.9 256 241 113c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0L47 239z"/></svg>

package/src/assets/icons/angle-right.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Pro 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc. --><path d="M273 239c9.4 9.4 9.4 24.6 0 33.9L113 433c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l143-143L79 113c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0L273 239z"/></svg>

package/src/assets/icons/angle-up.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="currentColor"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M207 143c9.4-9.4 24.6-9.4 33.9 0L401 303c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-143-143L81 337c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9L207 143z"/></svg>

package/src/assets/icons/close.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor"><path d="M480-424 284-228q-11 11-28 11t-28-11q-11-11-11-28t11-28l196-196-196-196q-11-11-11-28t11-28q11-11 28-11t28 11l196 196 196-196q11-11 28-11t28 11q11 11 11 28t-11 28L536-480l196 196q11 11 11 28t-11 28q-11 11-28 11t-28-11L480-424Z"/></svg>

package/src/assets/styles/index.css

@@ -0,0 +1 @@
+@import "./select.scss";

package/src/assets/styles/select.scss

@@ -0,0 +1,52 @@
+.naria-select {
+  position: relative;
+  .wrapper {
+    overflow: hidden;
+    &.mobile {
+      position: fixed;
+      top: 0;
+      right: 0;
+      height: 100%;
+      width: 100%;
+      z-index: 97;
+    }
+  }
+  .list {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    z-index: 99;
+    &.mobile {
+      position: relative;
+      height: 100%;
+    }
+    &.desktop {
+      overflow: auto;
+      position: absolute;
+      animation: fadeInTranslateY 0.3s ease-out forwards;
+    }
+  }
+  .backdrop-select {
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 98;
+    background-color: rgba(0, 0, 0, 0.2);
+  }
+}
+
+
+
+@keyframes fadeInTranslateY {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

package/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />