@gohanfromgoku/ui-kit 0.0.1

package/README.md

@@ -0,0 +1 @@
+# @gohanfromgoku/ui-kit

package/dist/api/index.js

@@ -0,0 +1 @@
+export const METHODS={GET:"GET",POST:"POST",PUT:"PUT",DELETE:"DELETE"};const appendParams=(t,e)=>{if(!e)return t;const s=new URLSearchParams({...e}).toString();return s?`${t}?${s}`:t},parseResponse=async t=>{const e=t.headers.get("content-type")||"";return e.includes("application/json")?await t.json().catch(()=>null):e.includes("text/")?await t.text():await t.blob().catch(()=>null)},baseHeaders={"Content-Type":"application/json"};export class API{baseURL;constructor(t){this.baseURL=t.replace(/\/+$/,"")}createURL(t){return t.startsWith("http")?t:"/"===t||""===t?this.baseURL:t.startsWith("/")?`${this.baseURL}${t}`:`${this.baseURL}/${t}`}async request(t,e,s={}){const{params:a,headers:r,body:n,signal:i}=s,o=appendParams(this.createURL(e),a),c=n instanceof FormData||t===METHODS.GET?{...r}:{...baseHeaders,...r},T=await fetch(o,{method:t,body:n?n instanceof FormData||"string"==typeof n?n:JSON.stringify(n):void 0,headers:c,signal:i}),E=await parseResponse(T);if(!T.ok)throw E;return E}GET=(t,e)=>this.request(METHODS.GET,t,e);POST=(t,e)=>this.request(METHODS.POST,t,e);PUT=(t,e)=>this.request(METHODS.PUT,t,e);DELETE=(t,e)=>this.request(METHODS.DELETE,t,e)}

package/dist/components/Button/index.js

@@ -0,0 +1 @@
+import{jsx as _jsx}from"preact/jsx-runtime";import{memo,forwardRef}from"preact/compat";import checkProps from"../../helpers/checkProps";const defaultProps={onClick:()=>{},disabled:!1,className:"",type:"button"},Button=forwardRef((e,t)=>{const{children:o,className:r,onClick:s,disabled:c,type:a,...p}={...defaultProps,...e};return _jsx("button",{ref:t,className:r,onClick:e=>{"button"!==a&&a||e.preventDefault(),!c&&s&&s(e)},...p,children:o})});export default memo(Button,checkProps);

package/dist/components/Image/index.js

@@ -0,0 +1 @@
+import{jsx as _jsx}from"preact/jsx-runtime";import{forwardRef,memo}from"preact/compat";import checkProps from"../../helpers/checkProps";const defaultProps={altImage:null,className:"",alt:"",priority:!0,onClick:()=>{}},Image=forwardRef((r,e)=>{const{altImage:a,className:t,src:o,priority:c,onClick:s,alt:l,...m}={...defaultProps,...r};return _jsx("img",{src:o,ref:e,width:"100%",height:"100%",onClick:r=>{r.preventDefault(),s(r)},draggable:!1,onError:async()=>{e&&"current"in e&&e.current&&(e.current.src=a||"")},alt:l,className:t,fetchPriority:c?"high":"auto",loading:c?"eager":"lazy",...m})});export default memo(Image,checkProps);

package/dist/components/Input/index.js

@@ -0,0 +1 @@
+import{jsx as _jsx}from"preact/jsx-runtime";import{memo}from"preact/compat";import checkProps from"../../helpers/checkProps";import{translate}from"../../translations/index";const defaultProps={onChange:()=>{},className:"",placeholder:"",type:"text",name:""},Input=e=>{const{onChange:t,className:a,placeholder:r,type:o,name:p,...s}={...defaultProps,...e};return _jsx("input",{className:a,placeholder:translate(r),type:o,name:p,onChange:e=>t(e.currentTarget.value,e),...s})};export default memo(Input,checkProps);

package/dist/components/Text/index.js

@@ -0,0 +1 @@
+import{jsx as _jsx}from"preact/jsx-runtime";import checkProps from"../../helpers/checkProps";import{translate}from"../../translations/index";import{forwardRef,memo,useMemo}from"preact/compat";const defaultProps={text:"",data:{},html:!1,className:"",tag:"span",onClick:()=>{}},Text=forwardRef((e,t)=>{const{text:r,data:a,html:s,className:o,tag:m,onClick:l,...n}={...defaultProps,...e},c=useMemo(()=>translate(r,a),[r,JSON.stringify(a)]);return _jsx(m,s?{...n,ref:t,dangerouslySetInnerHTML:{__html:c},className:o,onClick:e=>{e.preventDefault(),l(e)}}:{...n,ref:t,className:o,onClick:e=>{e.preventDefault(),l(e)},children:c})});export default memo(Text,checkProps);

package/dist/components/Tooltip/index.js

@@ -0,0 +1 @@
+import{jsx as _jsx}from"preact/jsx-runtime";import{useEffect,useRef}from"preact/hooks";import{memo}from"preact/compat";import checkProps from"../../helpers/checkProps";import toast from"../../helpers/toast";import{translate}from"../../translations/index";const isTouchDevice=()=>"undefined"!=typeof window&&"ontouchstart"in window,styles={width:"fit-content",height:"fit-content"},Tooltip=({message:e,children:t,className:o})=>{const r=useRef(null),s=useRef(null);useEffect(()=>()=>{s.current?.(),s.current=null},[]);const n=()=>{s.current?.(),s.current=null};return _jsx("section",{className:`${styles} ${o||""}`,ref:r,onMouseEnter:t=>{isTouchDevice()||(t.stopPropagation(),t.preventDefault(),r.current&&(s.current=toast(translate(e),r.current,0)))},onMouseLeave:e=>{isTouchDevice()||(e.stopPropagation(),e.preventDefault(),n())},onClick:t=>{t.stopPropagation(),t.preventDefault(),isTouchDevice()&&(s.current?n():s.current=toast(translate(e),r.current,2e3))},children:t})};export default memo(Tooltip,checkProps);

package/dist/helpers/checkProps.js

@@ -0,0 +1 @@
+const checkProps=(e,c)=>Array.from(new Set([...Object.keys(e),...Object.keys(c)])).every(r=>e[r]===c[r]);export default checkProps;

package/dist/helpers/objectPath.js

@@ -0,0 +1 @@
+const getPath=(t,e)=>{if(t)return e.split(".").reduce((t,e)=>{if(null!=t&&e in t)return t[e]},t)},hasPath=(t,e)=>void 0!==getPath(t,e),objectPath=t=>({get:e=>getPath(t,e),has:e=>hasPath(t,e),print:()=>t});export default objectPath;

package/dist/helpers/toast.js

@@ -0,0 +1 @@
+const toast=(t,e,n=1500)=>{if(!e)return;const s=e.getBoundingClientRect(),o=document.createElement("div");o.textContent=t,o.className="cursor-toast",o.style.opacity="0",o.style.position="fixed",o.style.top="0",o.style.left="0",o.style.transform="translateY(0)",o.style.transition="opacity 0.3s ease, transform 0.3s ease",document.body.appendChild(o),requestAnimationFrame(()=>{const t=o.getBoundingClientRect();let e=s.top-t.height-8,n=s.left+s.width/2-t.width/2;e=Math.max(8,Math.min(e,window.innerHeight-t.height-8)),n=Math.max(8,Math.min(n,window.innerWidth-t.width-8)),Object.assign(o.style,{top:`${e}px`,left:`${n}px`,opacity:"1",transform:"translateY(-4px)"})});let i=null;const a=()=>{o.isConnected&&(o.style.opacity="0",o.style.transform="translateY(0)",setTimeout(()=>o.remove(),300))};return n>0&&(i=setTimeout(a,n)),()=>{i&&clearTimeout(i),a()}};export default toast;

package/dist/hooks/useHandleClickOutside.js

@@ -0,0 +1 @@
+import{useEffect}from"preact/compat";const useHandleClickOutside=(e,t)=>{useEffect(()=>{const n=n=>{e.current&&(e.current.contains(n.target)||t())};return document.addEventListener("pointerdown",n,{passive:!0}),()=>{document.removeEventListener("pointerdown",n)}},[e,t])};export default useHandleClickOutside;

package/dist/hooks/useQueryParams.js

@@ -0,0 +1 @@
+import{signal}from"@preact/signals";const queryParamsSignal=signal({}),getParams=()=>{const a=window.location.search.slice(1),e=new URLSearchParams(a),r={};for(const[a,t]of e.entries())r[a]=t;return r};queryParamsSignal.value=getParams(),window.addEventListener("popstate",()=>{queryParamsSignal.value=getParams()});export const setQueryParams=(a,{replace:e=!1,pathname:r}={})=>{const t=new URLSearchParams;Object.entries(a).forEach(([a,e])=>{null!=e&&t.set(a,e)});const s=t.toString(),n=window.location.pathname,o=r??n,i=s?`${o}?${s}`:o;e?window.history.replaceState({},"",i):window.history.pushState({},"",i),queryParamsSignal.value=getParams()};export{queryParamsSignal as queryParams};

package/dist/hooks/useWindowSize.js

@@ -0,0 +1 @@
+import{useLayoutEffect,useMemo,useState}from"preact/hooks";const useWindowSize=()=>{const[e,t]=useState({height:window.innerHeight,width:window.innerWidth});return useLayoutEffect(()=>{const e=()=>{t({height:window.innerHeight,width:window.innerWidth})};return window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}},[]),useMemo(()=>({height:e.height,width:e.width}),[e.height,e.width])};export default useWindowSize;

package/dist/prototypes/copyToClipboard.js

@@ -0,0 +1 @@
+import toast from"../helpers/toast";const copyToClipboard=async(o="",t="Copied")=>{try{if(navigator.clipboard&&window.isSecureContext)return await navigator.clipboard.writeText(o),!0;const e=document.createElement("textarea");e.value=o,e.style.position="fixed",e.style.opacity="0",document.body.appendChild(e),e.focus(),e.select(),document.execCommand("copy"),document.body.removeChild(e),toast(t,document.body,1e3)}catch{toast("Failed to copy",document.body,1e3)}};export default copyToClipboard;

package/dist/prototypes/index.js

@@ -0,0 +1 @@
+import copyToClipboard from"./copyToClipboard";import maskString from"./maskString";String.prototype.copy||(String.prototype.copy=copyToClipboard,String.prototype.mask=maskString);

package/dist/prototypes/maskString.js

@@ -0,0 +1 @@
+const maskString=function(t=6,n="..."){if(null==this)return"";const r=String(this);if(!r)return"";if(r.length<=2*t)return r;return`${r.slice(0,t)}${n}${r.slice(-t)}`};export default maskString;

package/dist/storage/index.js

@@ -0,0 +1 @@
+import{signal}from"@preact/signals";const createStore=(e,t,a=[])=>{const r=signal({...t});try{const t=localStorage.getItem(e);t&&(r.value={...r.value,...JSON.parse(t)})}catch{}const l=t=>{if(r.value={...r.value,...t},a.length){const t=a.reduce((e,t)=>(e[t]=r.value[t],e),{});localStorage.setItem(e,JSON.stringify(t))}},s=()=>{r.value=t,localStorage.removeItem(e)};return Object.assign(new Proxy(t,{get(e,t){switch(t){case"setState":return l;case"resetState":return s;default:return r.value[t]}},set(t,l,s){if(r.value={...r.value,[l]:s},a.includes(l)){const t=a.reduce((e,t)=>(e[t]=r.value[t],e),{});localStorage.setItem(e,JSON.stringify(t))}return!0}}),{__signal:r})};export default createStore;

package/dist/translations/index.js

@@ -0,0 +1 @@
+import{signal,computed}from"@preact/signals";import objectPath from"../helpers/objectPath";export const languages=signal({});export const language=signal(window.localStorage.getItem("language")||"en");const translations=computed(()=>objectPath(languages.value[language.value])),interpolate=(t,e)=>"string"==typeof t?t.replace(/{{\s*(\w+)\s*}}/g,(t,a)=>a in e?String(e[a]):`{{${a}}}`):JSON.stringify(t);export const initTranslations=async t=>{try{return languages.value=t,!0}catch(t){return console.error(t),!1}};export const translate=(t,e={})=>{const a=translations.value;if(!a.has(t))return t;const n=a.get(t);return Object.keys(e).length?interpolate(n,e):n};export const changeLanguage=t=>(language.value=t,window.localStorage.setItem("language",t),!0);

package/package.json

@@ -0,0 +1,90 @@
+{
+  "name": "@gohanfromgoku/ui-kit",
+  "version": "0.0.1",
+  "description": "",
+  "scripts": {
+    "build": "tsc && tsc-alias && pnpm run minify",
+    "minify": "find dist -name '*.js' -exec terser {} --compress --mangle --output {} \\;",
+    "watch": "tsc --watch"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@preact/signals": "^2.5.1",
+    "preact": "^10.28.0"
+  },
+  "devDependencies": {
+    "terser": "^5.44.1",
+    "tsc-alias": "^1.8.16",
+    "typescript": "^5.9.3"
+  },
+  "files": [
+    "dist/**/*",
+    "types/**/*",
+    "README.md",
+    "package.json"
+  ],
+  "exports": {
+    "./prototypes": {
+      "import": "./dist/prototypes/index.js",
+      "types": "./types/prototypes/index.d.ts"
+    },
+    "./api": {
+      "import": "./dist/api/index.js",
+      "types": "./types/api/index.d.ts"
+    },
+    "./Button": {
+      "import": "./dist/components/Button/index.js",
+      "types": "./types/components/Button/index.d.ts"
+    },
+    "./Image": {
+      "import": "./dist/components/Image/index.js",
+      "types": "./types/components/Image/index.d.ts"
+    },
+    "./Input": {
+      "import": "./dist/components/Input/index.js",
+      "types": "./types/components/Input/index.d.ts"
+    },
+    "./Text": {
+      "import": "./dist/components/Text/index.js",
+      "types": "./types/components/Text/index.d.ts"
+    },
+    "./Tooltip": {
+      "import": "./dist/components/Tooltip/index.js",
+      "types": "./types/components/Tooltip/index.d.ts"
+    },
+    "./checkProps": {
+      "import": "./dist/helpers/checkProps.js",
+      "types": "./types/helpers/checkProps.d.ts"
+    },
+    "./objectPath": {
+      "import": "./dist/helpers/objectPath.js",
+      "types": "./types/helpers/objectPath.d.ts"
+    },
+    "./toast": {
+      "import": "./dist/helpers/toast.js",
+      "types": "./types/helpers/toast.d.ts"
+    },
+    "./useHandleClickOutside": {
+      "import": "./dist/hooks/useHandleClickOutside.js",
+      "types": "./types/hooks/useHandleClickOutside.d.ts"
+    },
+    "./useQueryParams": {
+      "import": "./dist/hooks/useQueryParams.js",
+      "types": "./types/hooks/useQueryParams.d.ts"
+    },
+    "./useWindowSize": {
+      "import": "./dist/hooks/useWindowSize.js",
+      "types": "./types/hooks/useWindowSize.d.ts"
+    },
+    "./storage": {
+      "import": "./dist/storage/index.js",
+      "types": "./types/storage/index.d.ts"
+    },
+    "./translations": {
+      "import": "./dist/translations/index.js",
+      "types": "./types/translations/index.d.ts"
+    }
+  }
+}

package/types/api/index.d.ts

@@ -0,0 +1,23 @@
+export declare const METHODS: {
+    readonly GET: "GET";
+    readonly POST: "POST";
+    readonly PUT: "PUT";
+    readonly DELETE: "DELETE";
+};
+export type RequestBody = Record<string, any> | string | FormData | Blob | ArrayBuffer | Uint8Array | null | undefined;
+export interface RequestOptions {
+    params?: Record<string, any>;
+    headers?: Record<string, any>;
+    body?: RequestBody;
+    signal?: AbortSignal;
+}
+export declare class API {
+    private baseURL;
+    constructor(baseURL: string);
+    private createURL;
+    private request;
+    GET: <T = any>(endpoint: string, opts?: RequestOptions) => Promise<T>;
+    POST: <T = any>(endpoint: string, opts?: RequestOptions) => Promise<T>;
+    PUT: <T = any>(endpoint: string, opts?: RequestOptions) => Promise<T>;
+    DELETE: <T = any>(endpoint: string, opts?: RequestOptions) => Promise<T>;
+}

package/types/components/Button/index.d.ts

@@ -0,0 +1,14 @@
+import type { ButtonHTMLAttributes } from "preact";
+import { type ReactNode, type Ref } from "preact/compat";
+type ClickEvent = MouseEvent | TouchEvent;
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    children: ReactNode;
+    className?: string;
+    disabled?: boolean;
+    onClick?: (event: ClickEvent) => void;
+    type?: "button" | "submit" | "reset";
+}
+declare const _default: import("preact").FunctionComponent<import("preact/compat").PropsWithoutRef<ButtonProps> & {
+    ref?: Ref<HTMLButtonElement> | undefined;
+}>;
+export default _default;

package/types/components/Image/index.d.ts

@@ -0,0 +1,14 @@
+import type { ImgHTMLAttributes } from "preact";
+type ClickEvent = MouseEvent | TouchEvent;
+export interface ImageProps extends ImgHTMLAttributes<HTMLImageElement> {
+    src: string;
+    className?: string;
+    alt?: string;
+    altImage?: null | string;
+    priority?: true | false;
+    onClick?: (event: ClickEvent) => void;
+}
+declare const _default: import("preact").FunctionComponent<import("preact/compat").PropsWithoutRef<ImageProps> & {
+    ref?: import("preact").Ref<HTMLImageElement> | undefined;
+}>;
+export default _default;

package/types/components/Input/index.d.ts

@@ -0,0 +1,10 @@
+import type { InputHTMLAttributes, TargetedEvent } from "preact";
+interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "onChange"> {
+    placeholder?: string;
+    className?: string;
+    type?: string;
+    onChange?: (value: string, event: TargetedEvent<HTMLInputElement, Event>) => void;
+    name?: string;
+}
+declare const _default: (props: InputProps) => import("preact").JSX.Element;
+export default _default;

package/types/components/Text/index.d.ts

@@ -0,0 +1,12 @@
+interface TextProps {
+    text: string;
+    data?: Record<string, string | number>;
+    html?: boolean;
+    className?: string;
+    tag?: any;
+    onClick?: (event: any) => void;
+}
+declare const _default: import("preact").FunctionComponent<import("preact/compat").PropsWithoutRef<TextProps> & {
+    ref?: import("preact").Ref<HTMLSpanElement> | undefined;
+}>;
+export default _default;

package/types/components/Tooltip/index.d.ts

@@ -0,0 +1,7 @@
+import { type ReactNode } from "preact/compat";
+declare const _default: ({ message, children, className }: {
+    message: string;
+    children: ReactNode;
+    className?: string;
+}) => import("preact").JSX.Element;
+export default _default;

package/types/helpers/checkProps.d.ts

@@ -0,0 +1,2 @@
+declare const checkProps: (prevProps: Record<string, any>, nextProps: Record<string, any>) => boolean;
+export default checkProps;

package/types/helpers/objectPath.d.ts

@@ -0,0 +1,6 @@
+declare const objectPath: (root: any) => {
+    get: (p: string) => any;
+    has: (p: string) => boolean;
+    print: () => any;
+};
+export default objectPath;

package/types/helpers/toast.d.ts

@@ -0,0 +1,2 @@
+declare const toast: (message: string, target: HTMLElement, duration?: number) => (() => void) | undefined;
+export default toast;

package/types/hooks/useHandleClickOutside.d.ts

@@ -0,0 +1,3 @@
+import { type MutableRefObject } from "preact/compat";
+declare const useHandleClickOutside: (ref: MutableRefObject<HTMLElement | null>, cb: () => void) => void;
+export default useHandleClickOutside;

package/types/hooks/useQueryParams.d.ts

@@ -0,0 +1,8 @@
+type QueryParams = Record<string, string>;
+type SetQueryParams = (updates: Record<string, any>, options?: {
+    replace?: boolean;
+    pathname?: string;
+}) => void;
+declare const queryParamsSignal: import("@preact/signals").Signal<QueryParams>;
+export declare const setQueryParams: SetQueryParams;
+export { queryParamsSignal as queryParams };

package/types/hooks/useWindowSize.d.ts

@@ -0,0 +1,5 @@
+declare const useWindowSize: () => {
+    height: number;
+    width: number;
+};
+export default useWindowSize;

package/types/prototypes/copyToClipboard.d.ts

@@ -0,0 +1,2 @@
+declare const copyToClipboard: (text?: string, message?: string) => Promise<true | undefined>;
+export default copyToClipboard;

package/types/prototypes/index.d.ts

@@ -0,0 +1,7 @@
+declare global {
+    interface String {
+        copy(text: string, message?: string): void;
+        mask(visibleCharacters?: number, maskWith?: string): string;
+    }
+}
+export {};

package/types/prototypes/maskString.d.ts

@@ -0,0 +1,2 @@
+declare const maskString: (this: string, visibleCharacters?: number, maskWith?: string) => string;
+export default maskString;

package/types/storage/index.d.ts

@@ -0,0 +1,8 @@
+type PersistKeys<T> = (keyof T)[];
+declare const createStore: <T extends Record<string, any>>(name: string, initialState: T, persist?: PersistKeys<T>) => T & {
+    setState: (values: Partial<T>) => void;
+    resetState: () => void;
+} & {
+    __signal: import("@preact/signals").Signal<T>;
+};
+export default createStore;

package/types/translations/index.d.ts

@@ -0,0 +1,5 @@
+export declare const languages: import("@preact/signals").Signal<Record<string, Record<string, any>>>;
+export declare const language: import("@preact/signals").Signal<string>;
+export declare const initTranslations: (langs: Record<string, Record<string, any>>) => Promise<boolean>;
+export declare const translate: (key: string, data?: Record<string, string | number>) => string;
+export declare const changeLanguage: (lang: string) => boolean;