@himanshu-sorathiya/react-kit 1.0.16 → 1.0.18

package/dist/ui.d.ts

@@ -0,0 +1,100 @@
+// Generated by dts-bundle-generator v9.5.1
+
+import React$1 from 'react';
+import { CSSProperties } from 'react';
+
+export interface FuzzyHighlighterProps {
+	text: string;
+	query: string;
+	className?: string;
+	caseSensitive?: boolean;
+}
+export declare function FuzzyHighlighter({ text, query, className, caseSensitive, }: FuzzyHighlighterProps): React$1.JSX.Element;
+export interface ModalLayoutProps {
+	modalId: string;
+	children: React$1.ReactNode;
+	wrapperClassName?: string;
+	wrapperStyle?: React$1.CSSProperties;
+	containerClassName?: string;
+	containerStyle?: React$1.CSSProperties;
+}
+export declare function ModalLayout({ modalId, children, wrapperClassName, wrapperStyle, containerClassName, containerStyle, }: ModalLayoutProps): import("react").ReactPortal | null;
+export type ExpansionId = string | number;
+export interface UseExpansionReturn<T> {
+	expandedIds: ExpansionId[];
+	expandedItems: T[];
+	isExpanded: (itemOrId: ExpansionId | T) => boolean;
+	expand: (itemOrId: ExpansionId | T) => void;
+	collapse: (itemOrId: ExpansionId | T) => void;
+	toggle: (itemOrId: ExpansionId | T) => void;
+	expandAll: () => void;
+	collapseAll: () => void;
+	resetExpansion: () => void;
+	replaceExpansion: (newExpandedItems: ExpansionId[] | T[]) => void;
+}
+export declare function useExpansion<T = unknown>({ items, field, initialExpandedIds, multiple, }?: {
+	items?: T[];
+	field?: string;
+	initialExpandedIds?: ExpansionId[];
+	multiple?: boolean;
+}): UseExpansionReturn<T>;
+export interface UseModalStateReturn<TData> {
+	isOpen: boolean;
+	id: string | null;
+	data: TData | undefined;
+}
+export interface UseModalActionsReturn {
+	openModal: <T = unknown>(id: string, data?: T) => void;
+	closeModal: () => void;
+	clearModal: () => void;
+}
+export type UseModalReturn<TData> = UseModalStateReturn<TData> & UseModalActionsReturn;
+export declare function useModalState<TData = unknown>(): UseModalStateReturn<TData>;
+export declare function useModalActions(): UseModalActionsReturn;
+export declare function useModal<TData = unknown>(): UseModalReturn<TData>;
+export type PinId = string | number;
+export interface UsePinReturn<T> {
+	pinnedIds: PinId[];
+	pinnedItems: T[];
+	unpinnedItems: T[];
+	pinnedCount: number;
+	hasPins: boolean;
+	isAtMaxLimit: boolean;
+	pin: (itemOrId: PinId | T) => void;
+	unpin: (itemOrId: PinId | T) => void;
+	togglePin: (itemOrId: PinId | T) => void;
+	isPinned: (itemOrId: PinId | T) => boolean;
+	clearPins: () => void;
+	resetPins: () => void;
+	replacePins: (newPinnedItems: PinId[] | T[]) => void;
+	pinMultiple: (newItems: PinId[] | T[]) => void;
+	unpinMultiple: (itemsToRemove: PinId[] | T[]) => void;
+}
+export declare function usePin<T = unknown>({ items, field, initialPinnedIds, maxPins, }: {
+	items: T[];
+	field?: string;
+	initialPinnedIds?: PinId[];
+	maxPins?: number;
+}): UsePinReturn<T>;
+export type VisibilityId = number | string;
+export interface UseVisibilityReturn<T> {
+	visibleIds: VisibilityId[];
+	visibleItems: T[];
+	hiddenItems: T[];
+	visibleCount: number;
+	isVisible: (itemOrId: VisibilityId | T) => boolean;
+	show: (itemOrId: VisibilityId | T) => void;
+	hide: (itemOrId: VisibilityId | T) => void;
+	toggleVisibility: (itemOrId: VisibilityId | T) => void;
+	showAll: (itemsArray?: VisibilityId[] | T[]) => void;
+	hideAll: (itemsArray?: VisibilityId[] | T[]) => void;
+	resetVisibility: () => void;
+	replaceVisibility: (newVisibleItems: VisibilityId[] | T[]) => void;
+}
+export declare function useVisibility<T = unknown>({ items, field, initialVisibleIds, }: {
+	items: T[];
+	field?: string;
+	initialVisibleIds?: VisibilityId[];
+}): UseVisibilityReturn<T>;
+
+export {};

package/dist/ui.js

@@ -0,0 +1,2 @@
+import { a as e, c as t, i as n, n as r, o as i, r as a, s as o, t as s } from "./ui2.js";
+export { t as FuzzyHighlighter, n as ModalLayout, a as useExpansion, e as useModal, i as useModalActions, o as useModalState, r as usePin, s as useVisibility };

package/dist/ui2.js

@@ -0,0 +1,287 @@
+import { t as e } from "./utils.js";
+import { createContext as t, useCallback as n, useContext as r, useEffect as i, useMemo as a, useRef as o, useState as s } from "react";
+import { Fragment as c, jsx as l } from "react/jsx-runtime";
+import { createPortal as u } from "react-dom";
+//#region src/ui/FuzzyHighlighter/FuzzyHighlighter.tsx
+function d({ text: e, query: t, className: n = "", caseSensitive: r = !1 }) {
+	let i = t.trim();
+	if (!i || !e) return /* @__PURE__ */ l(c, { children: e });
+	let a = i.split(/\s+/).filter((e) => e.length > 0);
+	if (a.length === 0) return /* @__PURE__ */ l(c, { children: e });
+	let o = `fuzzy-highlight ${n}`.trim(), s = [...a].sort((e, t) => t.length - e.length).map((e) => e.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")), u = [...s];
+	if (s.length > 1) {
+		let e = a.map((e) => e.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")).join("\\s+");
+		u.unshift(e);
+	}
+	if (i.length > 1 && i === i.toUpperCase() && /^[A-Z]+$/.test(i)) {
+		let e = i.split("").map((e) => `\\b${e}`).join("[^a-z0-9]*");
+		u.unshift(e);
+	}
+	let d = `(${u.join("|")})`, f = new RegExp(d, r ? "g" : "gi");
+	return /* @__PURE__ */ l(c, { children: e.split(f).map((e, t) => f.test(e) ? /* @__PURE__ */ l("strong", {
+		className: o,
+		children: e
+	}, t) : e) });
+}
+//#endregion
+//#region src/ui/useModal/ModalContext.tsx
+var f = t(null), p = t(null);
+//#endregion
+//#region src/ui/useModal/useModal.ts
+function m() {
+	let e = r(f);
+	if (!e) throw Error("useModalState must be used within a ModalProvider");
+	return e;
+}
+function h() {
+	let e = r(p);
+	if (!e) throw Error("useModalActions must be used within a ModalProvider");
+	return e;
+}
+function g() {
+	return {
+		...m(),
+		...h()
+	};
+}
+//#endregion
+//#region src/ui/useModal/ModalLayout.tsx
+function _({ modalId: e, children: t, wrapperClassName: n = "", wrapperStyle: r, containerClassName: a = "", containerStyle: c }) {
+	let { isOpen: d, id: f } = m(), { closeModal: p, clearModal: g } = h(), [_, v] = s(!1), y = o(null), b = o(null), x = f === e, S = d && x;
+	return i(() => {
+		let e = y.current;
+		e && (S && !e.open ? (document.activeElement && (b.current = document.activeElement), v(!1), e.showModal()) : !S && e.open && v(!0));
+	}, [S]), typeof document > "u" || !x && !_ ? null : u(/* @__PURE__ */ l("dialog", {
+		ref: y,
+		onCancel: (e) => {
+			e.preventDefault(), p();
+		},
+		onClose: p,
+		onClick: (e) => {
+			let t = y.current;
+			if (!t) return;
+			let n = t.getBoundingClientRect();
+			(e.clientX < n.x || e.clientX > n.x + n.width || e.clientY < n.y || e.clientY > n.y + n.height) && p();
+		},
+		onAnimationEnd: () => {
+			if (_) {
+				let e = y.current;
+				e && e.close(), v(!1), x && g(), b.current &&= (b.current.focus(), null);
+			}
+		},
+		className: `universal-modal ${n}`.trim(),
+		style: r,
+		children: /* @__PURE__ */ l("div", {
+			className: `modal-container ${a}`.trim(),
+			style: c,
+			children: t
+		})
+	}), document.body);
+}
+//#endregion
+//#region src/ui/useExpansion/useExpansion.ts
+function v({ items: t = [], field: r, initialExpandedIds: i = [], multiple: c = !1 } = {}) {
+	let l = o(i), [u, d] = s(() => new Set(i)), f = n((t) => {
+		let n = e(t, r);
+		return u.has(n);
+	}, [u, r]), p = n((t) => {
+		d((n) => {
+			let i = e(t, r);
+			if (n.has(i)) return n;
+			let a = c ? new Set(n) : /* @__PURE__ */ new Set();
+			return a.add(i), a;
+		});
+	}, [r, c]), m = n((t) => {
+		d((n) => {
+			let i = e(t, r);
+			if (!n.has(i)) return n;
+			let a = new Set(n);
+			return a.delete(i), a;
+		});
+	}, [r]), h = n((t) => {
+		d((n) => {
+			let i = e(t, r), a = c ? new Set(n) : /* @__PURE__ */ new Set();
+			return n.has(i) ? c && a.delete(i) : a.add(i), a;
+		});
+	}, [r, c]), g = n(() => {
+		if (!c) return;
+		let n = t.map((t) => e(t, r));
+		d(new Set(n));
+	}, [
+		t,
+		r,
+		c
+	]), _ = n(() => {
+		d(/* @__PURE__ */ new Set());
+	}, []), v = n(() => {
+		d(new Set(l.current));
+	}, []), y = n((t) => {
+		let n = t.map((t) => e(t, r));
+		d(new Set(n));
+	}, [r]), b = a(() => t.filter((t) => u.has(e(t, r))), [
+		t,
+		r,
+		u
+	]);
+	return {
+		expandedIds: [...u],
+		expandedItems: b,
+		isExpanded: f,
+		expand: p,
+		collapse: m,
+		toggle: h,
+		expandAll: g,
+		collapseAll: _,
+		resetExpansion: v,
+		replaceExpansion: y
+	};
+}
+//#endregion
+//#region src/ui/usePin/usePin.ts
+function y({ items: t, field: r, initialPinnedIds: i = [], maxPins: c = 2 ** 53 - 1 }) {
+	let l = o(i), [u, d] = s(() => new Set(i)), f = n((t) => {
+		d((n) => {
+			if (n.size >= c) return n;
+			let i = new Set(n), a = e(t, r);
+			return i.add(a), i;
+		});
+	}, [r, c]), p = n((t) => {
+		d((n) => {
+			let i = new Set(n), a = e(t, r);
+			return i.delete(a), i;
+		});
+	}, [r]), m = n((t) => {
+		d((n) => {
+			let i = new Set(n), a = e(t, r);
+			if (i.has(a)) i.delete(a);
+			else {
+				if (i.size >= c) return n;
+				i.add(a);
+			}
+			return i;
+		});
+	}, [r, c]), h = n((t) => {
+		let n = e(t, r);
+		return u.has(n);
+	}, [u, r]), g = n(() => d(/* @__PURE__ */ new Set()), []), _ = n(() => d(new Set(l.current)), [l]), v = n((t) => {
+		let n = t.map((t) => e(t, r));
+		d(new Set(n.slice(0, c)));
+	}, [r, c]), y = n((t) => {
+		d((n) => {
+			let i = new Set(n), a = t.map((t) => e(t, r));
+			for (let e of a) {
+				if (i.size >= c && !i.has(e)) break;
+				i.add(e);
+			}
+			return i;
+		});
+	}, [r, c]), b = n((t) => {
+		d((n) => {
+			let i = new Set(n);
+			return t.map((t) => e(t, r)).forEach((e) => i.delete(e)), i;
+		});
+	}, [r]), x = a(() => t.filter((t) => {
+		let n = e(t, r);
+		return u.has(n);
+	}), [
+		t,
+		r,
+		u
+	]), S = a(() => t.filter((t) => {
+		let n = e(t, r);
+		return !u.has(n);
+	}), [
+		t,
+		r,
+		u
+	]);
+	return {
+		pinnedIds: [...u],
+		pinnedItems: x,
+		unpinnedItems: S,
+		pinnedCount: u.size,
+		hasPins: u.size > 0,
+		isAtMaxLimit: u.size >= c,
+		pin: f,
+		unpin: p,
+		togglePin: m,
+		isPinned: h,
+		clearPins: g,
+		resetPins: _,
+		replacePins: v,
+		pinMultiple: y,
+		unpinMultiple: b
+	};
+}
+//#endregion
+//#region src/ui/useVisibility/useVisibility.ts
+function b({ items: t, field: r, initialVisibleIds: i = [] }) {
+	let c = o(i), [l, u] = s(() => new Set(i)), d = n((t) => {
+		let n = e(t, r);
+		return l.has(n);
+	}, [l, r]), f = n((t) => {
+		u((n) => {
+			let i = new Set(n), a = e(t, r);
+			return i.add(a), i;
+		});
+	}, [r]), p = n((t) => {
+		u((n) => {
+			let i = new Set(n), a = e(t, r);
+			return i.delete(a), i;
+		});
+	}, [r]), m = n((t) => {
+		u((n) => {
+			let i = new Set(n), a = e(t, r);
+			return i.has(a) ? i.delete(a) : i.add(a), i;
+		});
+	}, [r]), h = n((n) => {
+		u((i) => {
+			let a = new Set(i);
+			return (n ?? t).forEach((t) => {
+				a.add(e(t, r));
+			}), a;
+		});
+	}, [t, r]), g = n((n) => {
+		u((i) => {
+			let a = new Set(i);
+			return (n ?? t).forEach((t) => {
+				a.delete(e(t, r));
+			}), a;
+		});
+	}, [t, r]), _ = n(() => {
+		u(() => new Set(c.current));
+	}, []), v = n((t) => {
+		let n = t.map((t) => e(t, r));
+		u(() => new Set(n));
+	}, [r]), y = a(() => t.filter((t) => {
+		let n = e(t, r);
+		return l.has(n);
+	}), [
+		t,
+		r,
+		l
+	]), b = a(() => t.filter((t) => {
+		let n = e(t, r);
+		return !l.has(n);
+	}), [
+		t,
+		r,
+		l
+	]);
+	return {
+		visibleIds: [...l],
+		visibleItems: y,
+		hiddenItems: b,
+		visibleCount: l.size,
+		isVisible: d,
+		show: f,
+		hide: p,
+		toggleVisibility: m,
+		showAll: h,
+		hideAll: g,
+		replaceVisibility: v,
+		resetVisibility: _
+	};
+}
+//#endregion
+export { g as a, d as c, _ as i, y as n, h as o, v as r, m as s, b as t };

package/dist/utils.js

@@ -0,0 +1,8 @@
+//#region src/shared/utils.ts
+function e(e, t, n) {
+	if (typeof e != "object" || !e) return e;
+	let r = t ?? n ?? "";
+	return Array.isArray(r) ? r.reduce((e, t) => e?.[t], e) : r.includes(".") ? r.split(".").reduce((e, t) => e?.[t], e) : e?.[r];
+}
+//#endregion
+export { e as t };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@himanshu-sorathiya/react-kit",
-	"version": "1.0.16",
+	"version": "1.0.18",
 	"description": "An opinionated collection of react hooks, and reusable UI components.",
 	"type": "module",
 	"module": "./dist/index.js",
@@ -13,11 +13,27 @@
 			"types": "./dist/index.d.ts",
 			"import": "./dist/index.js"
 		},
+		"./ui": {
+			"types": "./dist/ui.d.ts",
+			"import": "./dist/ui.js"
+		},
+		"./state": {
+			"types": "./dist/state.d.ts",
+			"import": "./dist/state.js"
+		},
+		"./performance": {
+			"types": "./dist/performance.d.ts",
+			"import": "./dist/performance.js"
+		},
+		"./events": {
+			"types": "./dist/events.d.ts",
+			"import": "./dist/events.js"
+		},
 		"./styles.css": "./dist/index.css"
 	},
 	"scripts": {
 		"dev": "vite",
-		"build": "vite build && dts-bundle-generator --project tsconfig.app.json -o dist/index.d.ts src/index.ts",
+		"build": "vite build && dts-bundle-generator --project tsconfig.app.json -o dist/index.d.ts src/index.ts && dts-bundle-generator --project tsconfig.app.json -o dist/ui.d.ts src/ui/index.ts && dts-bundle-generator --project tsconfig.app.json -o dist/state.d.ts src/state/index.ts && dts-bundle-generator --project tsconfig.app.json -o dist/performance.d.ts src/performance/index.ts && dts-bundle-generator --project tsconfig.app.json -o dist/events.d.ts src/events/index.ts",
 		"lint": "eslint .",
 		"preview": "vite preview",
 		"format": "prettier . --write"