react-simplikit 0.0.51 → 0.0.53

package/dist/components/SwitchCase/SwitchCase.mjs

@@ -0,0 +1,40 @@
+"use client";
+//#region src/components/SwitchCase/SwitchCase.tsx
+/**
+* @description
+* `SwitchCase` is a component that allows you to declaratively render components based on a given value,
+* similar to a `switch-case` statement. It is useful when you need to conditionally render different
+* components depending on a specific state.
+*
+* @param {Case} value - The value to compare against.
+*   The component associated with the matching key in `caseBy` will be rendered.
+* @param {Partial<{ [P in StringifiedValue<Case>]: () => ReactElement | null }>} caseBy - An object that maps values to
+*   components to render. The keys represent possible values, and the values are functions returning
+*   the corresponding components.
+* @param {() => ReactElement | null} [defaultComponent] - The component to render if `value` does not match
+*   any key in `caseBy`.
+*
+* @returns {ReactElement | null} A React component that conditionally renders based on cases.
+*
+* @example
+* function App() {
+*   return (
+*     <SwitchCase
+*       value={status}
+*       // Renders TypeA, TypeB, or TypeC based on the status value.
+*       caseBy={{
+*         a: () => <TypeA />,
+*         b: () => <TypeB />,
+*         c: () => <TypeC />,
+*       }}
+*       // Renders Default when the status value does not match any case.
+*       defaultComponent={() => <Default />}
+*     />
+*   );
+* }
+*/
+function SwitchCase({ value, caseBy, defaultComponent = () => null }) {
+	return (caseBy[String(value)] ?? defaultComponent)();
+}
+//#endregion
+export { SwitchCase };

package/dist/components/SwitchCase/index.d.cts

@@ -1,46 +1,3 @@
-import { ReactElement } from 'react';
 
-type StringifiedValue<T> = (T extends boolean ? 'true' | 'false' : never) | (T extends number ? `${T}` : never) | (T extends string ? T : never);
-type Props<Case> = {
-    value: Case;
-    caseBy: Partial<{
-        [P in StringifiedValue<Case>]: () => ReactElement | null;
-    }>;
-    defaultComponent?: () => ReactElement | null;
-};
-/**
- * @description
- * `SwitchCase` is a component that allows you to declaratively render components based on a given value,
- * similar to a `switch-case` statement. It is useful when you need to conditionally render different
- * components depending on a specific state.
- *
- * @param {Case} value - The value to compare against.
- *   The component associated with the matching key in `caseBy` will be rendered.
- * @param {Partial<{ [P in StringifiedValue<Case>]: () => ReactElement | null }>} caseBy - An object that maps values to
- *   components to render. The keys represent possible values, and the values are functions returning
- *   the corresponding components.
- * @param {() => ReactElement | null} [defaultComponent] - The component to render if `value` does not match
- *   any key in `caseBy`.
- *
- * @returns {ReactElement | null} A React component that conditionally renders based on cases.
- *
- * @example
- * function App() {
- *   return (
- *     <SwitchCase
- *       value={status}
- *       // Renders TypeA, TypeB, or TypeC based on the status value.
- *       caseBy={{
- *         a: () => <TypeA />,
- *         b: () => <TypeB />,
- *         c: () => <TypeC />,
- *       }}
- *       // Renders Default when the status value does not match any case.
- *       defaultComponent={() => <Default />}
- *     />
- *   );
- * }
- */
-declare function SwitchCase<Case>({ value, caseBy, defaultComponent }: Props<Case>): ReactElement | null;
-
-export { SwitchCase };
+import { SwitchCase } from "./SwitchCase.cjs";
+export { SwitchCase };

package/dist/components/SwitchCase/index.d.mts

@@ -0,0 +1,3 @@
+
+import { SwitchCase } from "./SwitchCase.mjs";
+export { SwitchCase };

package/dist/hooks/useAsyncEffect/index.d.cts

@@ -1,25 +1,3 @@
-import { DependencyList } from 'react';
 
-/**
- * @description
- * `useAsyncEffect` is a React hook for handling asynchronous side effects in React components.
- * It follows the same cleanup pattern as `useEffect` while ensuring async operations are handled safely.
- *
- * @param {() => Promise<void | (() => void)>} [effect] - An asynchronous function executed in the `useEffect` pattern.
- *   This function can optionally return a cleanup function.
- * @param {DependencyList} [deps] - A dependency array.
- *   The effect will re-run whenever any value in this array changes. If omitted, it runs only once when the component mounts.
- *
- * @example
- * useAsyncEffect(async () => {
- *   const data = await fetchData();
- *   setData(data);
- *
- *   return () => {
- *     console.log('Cleanup on unmount or dependencies change');
- *   };
- * }, [dependencies]);
- */
-declare function useAsyncEffect(effect: () => Promise<void | (() => void)>, deps?: DependencyList): void;
-
-export { useAsyncEffect };
+import { useAsyncEffect } from "./useAsyncEffect.cjs";
+export { useAsyncEffect };

package/dist/hooks/useAsyncEffect/index.d.mts

@@ -0,0 +1,3 @@
+
+import { useAsyncEffect } from "./useAsyncEffect.mjs";
+export { useAsyncEffect };

package/dist/hooks/useAsyncEffect/useAsyncEffect.cjs

@@ -0,0 +1,39 @@
+"use client";
+let react = require("react");
+//#region src/hooks/useAsyncEffect/useAsyncEffect.ts
+/**
+* @description
+* `useAsyncEffect` is a React hook for handling asynchronous side effects in React components.
+* It follows the same cleanup pattern as `useEffect` while ensuring async operations are handled safely.
+*
+* @param {() => Promise<void | (() => void)>} [effect] - An asynchronous function executed in the `useEffect` pattern.
+*   This function can optionally return a cleanup function.
+* @param {DependencyList} [deps] - A dependency array.
+*   The effect will re-run whenever any value in this array changes. If omitted, it runs only once when the component mounts.
+*
+* @example
+* useAsyncEffect(async () => {
+*   const data = await fetchData();
+*   setData(data);
+*
+*   return () => {
+*     console.log('Cleanup on unmount or dependencies change');
+*   };
+* }, [dependencies]);
+*/
+function useAsyncEffect(effect, deps) {
+	(0, react.useEffect)(() => {
+		let cleanup;
+		let isCleaned = false;
+		effect().then((result) => {
+			cleanup = result;
+			if (isCleaned) cleanup?.();
+		});
+		return () => {
+			isCleaned = true;
+			cleanup?.();
+		};
+	}, deps);
+}
+//#endregion
+exports.useAsyncEffect = useAsyncEffect;

package/{esm/hooks/useAsyncEffect/index.d.ts → dist/hooks/useAsyncEffect/useAsyncEffect.d.cts}

@@ -1,5 +1,6 @@
-import { DependencyList } from 'react';
 
+import { DependencyList } from "react";
+//#region src/hooks/useAsyncEffect/useAsyncEffect.d.ts
 /**
  * @description
  * `useAsyncEffect` is a React hook for handling asynchronous side effects in React components.
@@ -21,5 +22,5 @@ import { DependencyList } from 'react';
  * }, [dependencies]);
  */
 declare function useAsyncEffect(effect: () => Promise<void | (() => void)>, deps?: DependencyList): void;
-
-export { useAsyncEffect };
+//#endregion
+export { useAsyncEffect };

package/dist/hooks/useAsyncEffect/useAsyncEffect.d.mts

@@ -0,0 +1,26 @@
+
+import { DependencyList } from "react";
+//#region src/hooks/useAsyncEffect/useAsyncEffect.d.ts
+/**
+ * @description
+ * `useAsyncEffect` is a React hook for handling asynchronous side effects in React components.
+ * It follows the same cleanup pattern as `useEffect` while ensuring async operations are handled safely.
+ *
+ * @param {() => Promise<void | (() => void)>} [effect] - An asynchronous function executed in the `useEffect` pattern.
+ *   This function can optionally return a cleanup function.
+ * @param {DependencyList} [deps] - A dependency array.
+ *   The effect will re-run whenever any value in this array changes. If omitted, it runs only once when the component mounts.
+ *
+ * @example
+ * useAsyncEffect(async () => {
+ *   const data = await fetchData();
+ *   setData(data);
+ *
+ *   return () => {
+ *     console.log('Cleanup on unmount or dependencies change');
+ *   };
+ * }, [dependencies]);
+ */
+declare function useAsyncEffect(effect: () => Promise<void | (() => void)>, deps?: DependencyList): void;
+//#endregion
+export { useAsyncEffect };

package/dist/hooks/useAsyncEffect/useAsyncEffect.mjs

@@ -0,0 +1,39 @@
+"use client";
+import { useEffect } from "react";
+//#region src/hooks/useAsyncEffect/useAsyncEffect.ts
+/**
+* @description
+* `useAsyncEffect` is a React hook for handling asynchronous side effects in React components.
+* It follows the same cleanup pattern as `useEffect` while ensuring async operations are handled safely.
+*
+* @param {() => Promise<void | (() => void)>} [effect] - An asynchronous function executed in the `useEffect` pattern.
+*   This function can optionally return a cleanup function.
+* @param {DependencyList} [deps] - A dependency array.
+*   The effect will re-run whenever any value in this array changes. If omitted, it runs only once when the component mounts.
+*
+* @example
+* useAsyncEffect(async () => {
+*   const data = await fetchData();
+*   setData(data);
+*
+*   return () => {
+*     console.log('Cleanup on unmount or dependencies change');
+*   };
+* }, [dependencies]);
+*/
+function useAsyncEffect(effect, deps) {
+	useEffect(() => {
+		let cleanup;
+		let isCleaned = false;
+		effect().then((result) => {
+			cleanup = result;
+			if (isCleaned) cleanup?.();
+		});
+		return () => {
+			isCleaned = true;
+			cleanup?.();
+		};
+	}, deps);
+}
+//#endregion
+export { useAsyncEffect };

package/dist/hooks/useBooleanState/useBooleanState.cjs

@@ -0,0 +1,36 @@
+"use client";
+let react = require("react");
+//#region src/hooks/useBooleanState/useBooleanState.ts
+/**
+* @description
+* `useBooleanState` is a React hook that simplifies managing a boolean state.
+* It provides functions to set the state to `true`, set it to `false`, and toggle its value.
+*
+* @param {boolean} [defaultValue=false] - The initial value of the state. Defaults to `false`.
+*
+* @returns {readonly [state: boolean, setTrue: () => void, setFalse: () => void, toggle: () => void]} A tuple containing:
+* - state `boolean` - The current state value;
+* - setTrue `() => void` - A function to set the state to `true`;
+* - setFalse `() => void` - A function to set the state to `false`;
+* - toggle `() => void` - A function to toggle the state;
+*
+* @example
+* const [open, openBottomSheet, closeBottomSheet, toggleBottomSheet] = useBooleanState(false);
+*/
+function useBooleanState(defaultValue = false) {
+	const [bool, setBool] = (0, react.useState)(defaultValue);
+	return [
+		bool,
+		(0, react.useCallback)(() => {
+			setBool(true);
+		}, []),
+		(0, react.useCallback)(() => {
+			setBool(false);
+		}, []),
+		(0, react.useCallback)(() => {
+			setBool((prevBool) => !prevBool);
+		}, [])
+	];
+}
+//#endregion
+exports.useBooleanState = useBooleanState;

package/dist/hooks/useBooleanState/{index.d.cts → useBooleanState.d.cts}

@@ -1,3 +1,5 @@
+
+//#region src/hooks/useBooleanState/useBooleanState.d.ts
 /**
  * @description
  * `useBooleanState` is a React hook that simplifies managing a boolean state.
@@ -15,5 +17,5 @@
  * const [open, openBottomSheet, closeBottomSheet, toggleBottomSheet] = useBooleanState(false);
  */
 declare function useBooleanState(defaultValue?: boolean): readonly [boolean, () => void, () => void, () => void];
-
-export { useBooleanState };
+//#endregion
+export { useBooleanState };

package/{esm/hooks/useBooleanState/index.d.ts → dist/hooks/useBooleanState/useBooleanState.d.mts}

@@ -1,3 +1,5 @@
+
+//#region src/hooks/useBooleanState/useBooleanState.d.ts
 /**
  * @description
  * `useBooleanState` is a React hook that simplifies managing a boolean state.
@@ -15,5 +17,5 @@
  * const [open, openBottomSheet, closeBottomSheet, toggleBottomSheet] = useBooleanState(false);
  */
 declare function useBooleanState(defaultValue?: boolean): readonly [boolean, () => void, () => void, () => void];
-
-export { useBooleanState };
+//#endregion
+export { useBooleanState };

package/dist/hooks/useBooleanState/useBooleanState.mjs

@@ -0,0 +1,36 @@
+"use client";
+import { useCallback, useState } from "react";
+//#region src/hooks/useBooleanState/useBooleanState.ts
+/**
+* @description
+* `useBooleanState` is a React hook that simplifies managing a boolean state.
+* It provides functions to set the state to `true`, set it to `false`, and toggle its value.
+*
+* @param {boolean} [defaultValue=false] - The initial value of the state. Defaults to `false`.
+*
+* @returns {readonly [state: boolean, setTrue: () => void, setFalse: () => void, toggle: () => void]} A tuple containing:
+* - state `boolean` - The current state value;
+* - setTrue `() => void` - A function to set the state to `true`;
+* - setFalse `() => void` - A function to set the state to `false`;
+* - toggle `() => void` - A function to toggle the state;
+*
+* @example
+* const [open, openBottomSheet, closeBottomSheet, toggleBottomSheet] = useBooleanState(false);
+*/
+function useBooleanState(defaultValue = false) {
+	const [bool, setBool] = useState(defaultValue);
+	return [
+		bool,
+		useCallback(() => {
+			setBool(true);
+		}, []),
+		useCallback(() => {
+			setBool(false);
+		}, []),
+		useCallback(() => {
+			setBool((prevBool) => !prevBool);
+		}, [])
+	];
+}
+//#endregion
+export { useBooleanState };

package/dist/hooks/useCallbackOncePerRender/index.d.cts

@@ -1,40 +1,3 @@
-import { DependencyList } from 'react';
 
-/**
- * @description
- * `useCallbackOncePerRender` is a React hook that ensures a callback function is executed only once, regardless of how many times it's called.
- *  This is useful for one-time operations that should not be repeated, even if the component re-renders.
- *
- * @param {() => void} callback - The callback function to be executed once.
- * @param {DependencyList} deps - Dependencies array that will trigger a new one-time execution when changed.
- *
- * @returns {(...args: any[]) => void} A memoized function that will only execute once until dependencies change.
- *
- * @example
- * import { useCallbackOncePerRender } from 'react-simplikit';
- *
- * function Component() {
- *   const handleOneTimeEvent = useCallbackOncePerRender(() => {
- *     console.log('This will only run once');
- *   }, []);
- *
- *   return <button onClick={handleOneTimeEvent}>Click me</button>;
- * }
- *
- * @example
- * // With dependencies
- * function TrackingComponent({ userId }: { userId: string }) {
- *   const trackUserVisit = useCallbackOncePerRender(() => {
- *     analytics.trackVisit(userId);
- *   }, [userId]);
- *
- *   useEffect(() => {
- *     trackUserVisit();
- *   }, [trackUserVisit]);
- *
- *   return <div>User page</div>;
- * }
- */
-declare function useCallbackOncePerRender<F extends (...args: any[]) => void>(callback: F, deps: DependencyList): (...args: Parameters<F>) => void;
-
-export { useCallbackOncePerRender };
+import { useCallbackOncePerRender } from "./useCallbackOncePerRender.cjs";
+export { useCallbackOncePerRender };

package/dist/hooks/useCallbackOncePerRender/index.d.mts

@@ -0,0 +1,3 @@
+
+import { useCallbackOncePerRender } from "./useCallbackOncePerRender.mjs";
+export { useCallbackOncePerRender };

package/dist/hooks/useCallbackOncePerRender/useCallbackOncePerRender.cjs

@@ -0,0 +1,52 @@
+"use client";
+const require_usePreservedCallback = require("../usePreservedCallback/usePreservedCallback.cjs");
+let react = require("react");
+//#region src/hooks/useCallbackOncePerRender/useCallbackOncePerRender.ts
+/**
+* @description
+* `useCallbackOncePerRender` is a React hook that ensures a callback function is executed only once, regardless of how many times it's called.
+*  This is useful for one-time operations that should not be repeated, even if the component re-renders.
+*
+* @param {() => void} callback - The callback function to be executed once.
+* @param {DependencyList} deps - Dependencies array that will trigger a new one-time execution when changed.
+*
+* @returns {(...args: any[]) => void} A memoized function that will only execute once until dependencies change.
+*
+* @example
+* import { useCallbackOncePerRender } from 'react-simplikit';
+*
+* function Component() {
+*   const handleOneTimeEvent = useCallbackOncePerRender(() => {
+*     console.log('This will only run once');
+*   }, []);
+*
+*   return <button onClick={handleOneTimeEvent}>Click me</button>;
+* }
+*
+* @example
+* // With dependencies
+* function TrackingComponent({ userId }: { userId: string }) {
+*   const trackUserVisit = useCallbackOncePerRender(() => {
+*     analytics.trackVisit(userId);
+*   }, [userId]);
+*
+*   useEffect(() => {
+*     trackUserVisit();
+*   }, [trackUserVisit]);
+*
+*   return <div>User page</div>;
+* }
+*/
+function useCallbackOncePerRender(callback, deps) {
+	const hasFired = (0, react.useRef)(false);
+	(0, react.useEffect)(() => {
+		hasFired.current = false;
+	}, deps);
+	return require_usePreservedCallback.usePreservedCallback((...args) => {
+		if (hasFired.current) return;
+		callback(...args);
+		hasFired.current = true;
+	});
+}
+//#endregion
+exports.useCallbackOncePerRender = useCallbackOncePerRender;

package/{esm/hooks/useCallbackOncePerRender/index.d.ts → dist/hooks/useCallbackOncePerRender/useCallbackOncePerRender.d.cts}

@@ -1,5 +1,6 @@
-import { DependencyList } from 'react';
 
+import { DependencyList } from "react";
+//#region src/hooks/useCallbackOncePerRender/useCallbackOncePerRender.d.ts
 /**
  * @description
  * `useCallbackOncePerRender` is a React hook that ensures a callback function is executed only once, regardless of how many times it's called.
@@ -36,5 +37,5 @@ import { DependencyList } from 'react';
  * }
  */
 declare function useCallbackOncePerRender<F extends (...args: any[]) => void>(callback: F, deps: DependencyList): (...args: Parameters<F>) => void;
-
-export { useCallbackOncePerRender };
+//#endregion
+export { useCallbackOncePerRender };

package/dist/hooks/useCallbackOncePerRender/useCallbackOncePerRender.d.mts

@@ -0,0 +1,41 @@
+
+import { DependencyList } from "react";
+//#region src/hooks/useCallbackOncePerRender/useCallbackOncePerRender.d.ts
+/**
+ * @description
+ * `useCallbackOncePerRender` is a React hook that ensures a callback function is executed only once, regardless of how many times it's called.
+ *  This is useful for one-time operations that should not be repeated, even if the component re-renders.
+ *
+ * @param {() => void} callback - The callback function to be executed once.
+ * @param {DependencyList} deps - Dependencies array that will trigger a new one-time execution when changed.
+ *
+ * @returns {(...args: any[]) => void} A memoized function that will only execute once until dependencies change.
+ *
+ * @example
+ * import { useCallbackOncePerRender } from 'react-simplikit';
+ *
+ * function Component() {
+ *   const handleOneTimeEvent = useCallbackOncePerRender(() => {
+ *     console.log('This will only run once');
+ *   }, []);
+ *
+ *   return <button onClick={handleOneTimeEvent}>Click me</button>;
+ * }
+ *
+ * @example
+ * // With dependencies
+ * function TrackingComponent({ userId }: { userId: string }) {
+ *   const trackUserVisit = useCallbackOncePerRender(() => {
+ *     analytics.trackVisit(userId);
+ *   }, [userId]);
+ *
+ *   useEffect(() => {
+ *     trackUserVisit();
+ *   }, [trackUserVisit]);
+ *
+ *   return <div>User page</div>;
+ * }
+ */
+declare function useCallbackOncePerRender<F extends (...args: any[]) => void>(callback: F, deps: DependencyList): (...args: Parameters<F>) => void;
+//#endregion
+export { useCallbackOncePerRender };

package/dist/hooks/useCallbackOncePerRender/useCallbackOncePerRender.mjs

@@ -0,0 +1,52 @@
+"use client";
+import { usePreservedCallback } from "../usePreservedCallback/usePreservedCallback.mjs";
+import { useEffect, useRef } from "react";
+//#region src/hooks/useCallbackOncePerRender/useCallbackOncePerRender.ts
+/**
+* @description
+* `useCallbackOncePerRender` is a React hook that ensures a callback function is executed only once, regardless of how many times it's called.
+*  This is useful for one-time operations that should not be repeated, even if the component re-renders.
+*
+* @param {() => void} callback - The callback function to be executed once.
+* @param {DependencyList} deps - Dependencies array that will trigger a new one-time execution when changed.
+*
+* @returns {(...args: any[]) => void} A memoized function that will only execute once until dependencies change.
+*
+* @example
+* import { useCallbackOncePerRender } from 'react-simplikit';
+*
+* function Component() {
+*   const handleOneTimeEvent = useCallbackOncePerRender(() => {
+*     console.log('This will only run once');
+*   }, []);
+*
+*   return <button onClick={handleOneTimeEvent}>Click me</button>;
+* }
+*
+* @example
+* // With dependencies
+* function TrackingComponent({ userId }: { userId: string }) {
+*   const trackUserVisit = useCallbackOncePerRender(() => {
+*     analytics.trackVisit(userId);
+*   }, [userId]);
+*
+*   useEffect(() => {
+*     trackUserVisit();
+*   }, [trackUserVisit]);
+*
+*   return <div>User page</div>;
+* }
+*/
+function useCallbackOncePerRender(callback, deps) {
+	const hasFired = useRef(false);
+	useEffect(() => {
+		hasFired.current = false;
+	}, deps);
+	return usePreservedCallback((...args) => {
+		if (hasFired.current) return;
+		callback(...args);
+		hasFired.current = true;
+	});
+}
+//#endregion
+export { useCallbackOncePerRender };

package/dist/hooks/useConditionalEffect/index.d.cts

@@ -1,43 +1,3 @@
-import { DependencyList, EffectCallback } from 'react';
 
-/**
- * @description
- * `useConditionalEffect` is a React hook that conditionally executes effects based on a predicate function.
- * This provides more control over when effects run beyond just dependency changes.
- *
- * @param {EffectCallback} effect - The effect callback to run.
- * @param {DependencyList} deps - Dependencies array, similar to useEffect.
- * @param {(prevDeps: T | undefined, currentDeps: T) => boolean} condition - Function that determines if the effect should run based on previous and current deps.
- * - On the initial render, `prevDeps` will be `undefined`. Your `condition` function should handle this case.
- * - If you want your effect to run on the initial render, return `true` when `prevDeps` is `undefined`.
- * - If you don't want your effect to run on the initial render, return `false` when `prevDeps` is `undefined`.
- *
- * @example
- * import { useConditionalEffect } from 'react-simplikit';
- *
- * function Component() {
- *   const [count, setCount] = useState(0);
- *
- *   // Only run effect when count increases
- *   useConditionalEffect(
- *     () => {
- *       console.log(`Count increased to ${count}`);
- *     },
- *     [count],
- *     (prevDeps, currentDeps) => {
- *       // Only run when count is defined and has increased
- *       return prevDeps && currentDeps[0] > prevDeps[0];
- *     }
- *   );
- *
- *   return (
- *     <button onClick={() => setCount(prev => prev + 1)}>
- *       Increment: {count}
- *     </button>
- *   );
- * }
- *
- */
-declare function useConditionalEffect<T extends DependencyList>(effect: EffectCallback, deps: T, condition: (prevDeps: T | undefined, currentDeps: T) => boolean): void;
-
-export { useConditionalEffect };
+import { useConditionalEffect } from "./useConditionalEffect.cjs";
+export { useConditionalEffect };

package/dist/hooks/useConditionalEffect/index.d.mts

@@ -0,0 +1,3 @@
+
+import { useConditionalEffect } from "./useConditionalEffect.mjs";
+export { useConditionalEffect };