react-simplikit 0.0.2 → 0.0.4

package/dist/utils/buildContext/index.d.ts

@@ -0,0 +1,38 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+type ProviderProps<ContextValuesType> = (ContextValuesType & {
+    children: ReactNode;
+}) | {
+    children: ReactNode;
+};
+/**
+ * @description
+ * `buildContext` is a helper function that reduces repetitive code when defining React Context.
+ *
+ * @param contextName - The name of the context.
+ * @param defaultContextValues - The default values to be passed to the context.
+ *
+ * @returns A tuple of the form [Provider, useContext]:
+ * - `Provider`: The component that provides the context.
+ * - `useContext`: The hook that uses the context.
+ *
+ * @example
+ * const [Provider, useContext] = buildContext<{ title: string }>('TestContext', null);
+ *
+ * function Inner() {
+ *   const { title } = useContext();
+ *   return <div>{title}</div>;
+ * }
+ *
+ * function Page() {
+ *   return (
+ *     <Provider title="Hello">
+ *       <Inner />
+ *     </Provider>
+ *   );
+ * }
+ */
+declare function buildContext<ContextValuesType extends object>(contextName: string, defaultContextValues?: ContextValuesType): readonly [({ children, ...contextValues }: ProviderProps<ContextValuesType>) => react_jsx_runtime.JSX.Element, () => ContextValuesType];
+
+export { buildContext };

package/dist/utils/buildContext/index.js

@@ -0,0 +1,55 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/utils/buildContext/index.ts
+var buildContext_exports = {};
+__export(buildContext_exports, {
+  buildContext: () => buildContext
+});
+module.exports = __toCommonJS(buildContext_exports);
+
+// src/utils/buildContext/buildContext.tsx
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+function buildContext(contextName, defaultContextValues) {
+  const Context = (0, import_react.createContext)(defaultContextValues ?? void 0);
+  function Provider({ children, ...contextValues }) {
+    const value = (0, import_react.useMemo)(
+      () => Object.keys(contextValues).length > 0 ? contextValues : null,
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [...Object.values(contextValues)]
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Context.Provider, { value, children });
+  }
+  function useInnerContext() {
+    const context = (0, import_react.useContext)(Context);
+    if (context != null) {
+      return context;
+    }
+    if (defaultContextValues != null) {
+      return defaultContextValues;
+    }
+    throw new Error(`\`${contextName}Context\` must be used within \`${contextName}Provider\``);
+  }
+  return [Provider, useInnerContext];
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  buildContext
+});

package/dist/utils/mergeRefs/index.d.ts

@@ -0,0 +1,37 @@
+import { RefObject, RefCallback } from 'react';
+
+/**
+ * @description
+ * This function takes multiple refs (RefObject or RefCallback) and returns a single ref that updates all provided refs.
+ * It's useful when you need to pass multiple refs to a single element.
+ *
+ * @param refs - An array of refs to be merged. Each ref can be either a RefObject or RefCallback.
+ *
+ * @returns A single ref callback that updates all provided refs.
+ *
+ * @example
+ * forwardRef(function Component(props, parentRef) {
+ *   const myRef = useRef(null);
+ *
+ *   return <div ref={mergeRefs(myRef, parentRef)} />;
+ * })
+ *
+ * @example
+ * function Component(props) {
+ *   const ref = useRef(null);
+ *   const [height, setHeight] = useState(0);
+ *
+ *   const measuredRef = useCallback(node => {
+ *     if(node == null) {
+ *       return;
+ *     }
+ *
+ *     setHeight(node.offsetHeight);
+ *   }, []);
+ *
+ *   return <div ref={mergeRefs(measuredRef, ref)} />;
+ * }
+ */
+declare function mergeRefs<T>(...refs: Array<RefObject<T> | RefCallback<T> | null | undefined>): RefCallback<T>;
+
+export { mergeRefs };

package/dist/utils/mergeRefs/index.js

@@ -0,0 +1,45 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/utils/mergeRefs/index.ts
+var mergeRefs_exports = {};
+__export(mergeRefs_exports, {
+  mergeRefs: () => mergeRefs
+});
+module.exports = __toCommonJS(mergeRefs_exports);
+
+// src/utils/mergeRefs/mergeRefs.ts
+function mergeRefs(...refs) {
+  return (value) => {
+    for (const ref of refs) {
+      if (ref == null) {
+        continue;
+      }
+      if (typeof ref === "function") {
+        ref(value);
+        continue;
+      }
+      ref.current = value;
+    }
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  mergeRefs
+});

package/esm/components/ImpressionArea/index.d.mts

@@ -0,0 +1,46 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default, { ElementType, Ref } from 'react';
+import { UseImpressionRefOptions } from '../../hooks/useImpressionRef/index.mjs';
+
+type Props<Tag extends ElementType> = React__default.ComponentPropsWithoutRef<Tag> & UseImpressionRefOptions & {
+    as?: Tag;
+    ref?: Ref<HTMLElement>;
+    children?: React__default.ReactNode;
+    className?: string;
+};
+/**
+ * @description
+ * `ImpressionArea` is a component that measures the time a specific DOM element is visible on the screen
+ * and executes callbacks when the element enters or exits the viewport. This component uses the `useImpressionRef`
+ * hook to track the element's visibility.
+ *
+ * @param {Object} props - The props for the component.
+ * @param {ElementType} [props.as='div'] - The HTML tag to render. Defaults to `div`.
+ * @param {string} [props.rootMargin] - Margin to adjust the detection area.
+ * @param {number} [props.areaThreshold] - Minimum ratio of the element that must be visible (0 to 1).
+ * @param {number} [props.timeThreshold] - Minimum time the element must be visible (in milliseconds).
+ * @param {() => void} [props.onImpressionStart] - Callback function executed when the element enters the view.
+ * @param {() => void} [props.onImpressionEnd] - Callback function executed when the element exits the view.
+ * @param {Ref<HTMLElement>} [props.ref] - Reference to the element.
+ * @param {React.ReactNode} [props.children] - Child elements to be rendered inside the component.
+ * @param {string} [props.className] - Additional class names for styling.
+ *
+ * @returns {JSX.Element} A React component that tracks the visibility of its child elements.
+ *
+ * @example
+ * function App() {
+ *   return (
+ *     <ImpressionArea
+ *       onImpressionStart={() => console.log('Element entered view')}
+ *       onImpressionEnd={() => console.log('Element exited view')}
+ *       timeThreshold={1000}
+ *       areaThreshold={0.5}
+ *     >
+ *       <div>Track me!</div>
+ *     </ImpressionArea>
+ *   );
+ * }
+ */
+declare function ImpressionArea<T extends ElementType = 'div'>({ as, rootMargin, areaThreshold, timeThreshold, onImpressionStart, onImpressionEnd, ref, ...props }: Props<T>): react_jsx_runtime.JSX.Element;
+
+export { ImpressionArea };

package/esm/components/ImpressionArea/index.mjs

@@ -0,0 +1,249 @@
+// src/hooks/useImpressionRef/useImpressionRef.ts
+import { useRef as useRef4 } from "react";
+
+// src/hooks/useIntersectionObserver/useIntersectionObserver.ts
+import { useMemo } from "react";
+
+// src/hooks/usePreservedCallback/usePreservedCallback.ts
+import { useCallback, useEffect, useRef } from "react";
+function usePreservedCallback(callback) {
+  const callbackRef = useRef(callback);
+  useEffect(() => {
+    callbackRef.current = callback;
+  }, [callback]);
+  return useCallback((...args) => {
+    return callbackRef.current(...args);
+  }, []);
+}
+
+// src/hooks/useRefEffect/useRefEffect.ts
+import { useCallback as useCallback2, useRef as useRef2 } from "react";
+function useRefEffect(callback, deps) {
+  const preservedCallback = usePreservedCallback(callback);
+  const cleanupCallbackRef = useRef2(() => {
+  });
+  const effect = useCallback2(
+    (element) => {
+      cleanupCallbackRef.current();
+      cleanupCallbackRef.current = () => {
+      };
+      if (element == null) {
+        return;
+      }
+      const cleanup = preservedCallback(element);
+      if (typeof cleanup === "function") {
+        cleanupCallbackRef.current = cleanup;
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [preservedCallback, ...deps]
+  );
+  return effect;
+}
+
+// src/hooks/useIntersectionObserver/useIntersectionObserver.ts
+function useIntersectionObserver(callback, options) {
+  const preservedCallback = usePreservedCallback(callback);
+  const observer = useMemo(() => {
+    if (typeof IntersectionObserver === "undefined") {
+      return;
+    }
+    return new IntersectionObserver(([entry]) => {
+      preservedCallback(entry);
+    }, options);
+  }, [preservedCallback, options]);
+  return useRefEffect(
+    (element) => {
+      observer?.observe(element);
+      return () => {
+        observer?.unobserve(element);
+      };
+    },
+    [preservedCallback, options]
+  );
+}
+
+// src/hooks/useVisibilityEvent/useVisibilityEvent.ts
+import { useCallback as useCallback3, useEffect as useEffect2 } from "react";
+function useVisibilityEvent(callback, options = {}) {
+  const handleVisibilityChange = useCallback3(() => {
+    callback(document.visibilityState);
+  }, [callback]);
+  useEffect2(() => {
+    if (options?.immediate ?? false) {
+      handleVisibilityChange();
+    }
+    document.addEventListener("visibilitychange", handleVisibilityChange);
+    return () => {
+      document.removeEventListener("visibilitychange", handleVisibilityChange);
+    };
+  }, [handleVisibilityChange, options?.immediate]);
+}
+
+// src/hooks/useImpressionRef/useDebouncedCallback.ts
+import { useCallback as useCallback4, useEffect as useEffect3, useRef as useRef3 } from "react";
+
+// src/hooks/useDebounce/debounce.ts
+function debounce(func, debounceMs, { edges = ["leading", "trailing"] } = {}) {
+  let pendingThis = void 0;
+  let pendingArgs = null;
+  const leading = edges != null && edges.includes("leading");
+  const trailing = edges == null || edges.includes("trailing");
+  const invoke = () => {
+    if (pendingArgs !== null) {
+      func.apply(pendingThis, pendingArgs);
+      pendingThis = void 0;
+      pendingArgs = null;
+    }
+  };
+  const onTimerEnd = () => {
+    if (trailing) {
+      invoke();
+    }
+    cancel();
+  };
+  let timeoutId = null;
+  const schedule = () => {
+    if (timeoutId != null) {
+      clearTimeout(timeoutId);
+    }
+    timeoutId = setTimeout(() => {
+      timeoutId = null;
+      onTimerEnd();
+    }, debounceMs);
+  };
+  const cancelTimer = () => {
+    if (timeoutId !== null) {
+      clearTimeout(timeoutId);
+      timeoutId = null;
+    }
+  };
+  const cancel = () => {
+    cancelTimer();
+    pendingThis = void 0;
+    pendingArgs = null;
+  };
+  const debounced = function(...args) {
+    pendingThis = this;
+    pendingArgs = args;
+    const isFirstCall = timeoutId == null;
+    schedule();
+    if (leading && isFirstCall) {
+      invoke();
+    }
+  };
+  debounced.cancel = cancel;
+  return debounced;
+}
+
+// src/hooks/useImpressionRef/useDebouncedCallback.ts
+function useDebouncedCallback({
+  onChange,
+  timeThreshold
+}) {
+  const handleChange = usePreservedCallback(onChange);
+  const ref = useRef3({ value: false, clearPreviousDebounce: () => {
+  } });
+  useEffect3(() => {
+    const current = ref.current;
+    return () => {
+      current.clearPreviousDebounce();
+    };
+  }, []);
+  return useCallback4(
+    (nextValue) => {
+      if (nextValue === ref.current.value) {
+        return;
+      }
+      const debounced = debounce(() => {
+        handleChange(nextValue);
+        ref.current.value = nextValue;
+      }, timeThreshold);
+      ref.current.clearPreviousDebounce();
+      debounced();
+      ref.current.clearPreviousDebounce = debounced.cancel;
+    },
+    [handleChange, timeThreshold]
+  );
+}
+
+// src/hooks/useImpressionRef/useImpressionRef.ts
+function useImpressionRef({
+  onImpressionStart = () => {
+  },
+  onImpressionEnd = () => {
+  },
+  rootMargin,
+  areaThreshold = 0,
+  timeThreshold = 0
+}) {
+  const impressionStartHandler = usePreservedCallback(onImpressionStart);
+  const impressionEndHandler = usePreservedCallback(onImpressionEnd);
+  const isIntersectingRef = useRef4(false);
+  const impressionEventHandler = useDebouncedCallback({
+    timeThreshold,
+    onChange: (impressed) => {
+      (impressed ? impressionStartHandler : impressionEndHandler)();
+    }
+  });
+  useVisibilityEvent((documentVisible) => {
+    if (!isIntersectingRef.current) {
+      return;
+    }
+    impressionEventHandler(documentVisible === "visible");
+  });
+  return useIntersectionObserver(
+    (entry) => {
+      if (document.visibilityState === "hidden") {
+        return;
+      }
+      const currentRatio = entry.intersectionRatio;
+      const isIntersecting = areaThreshold === 0 ? entry.isIntersecting : currentRatio >= areaThreshold;
+      isIntersectingRef.current = isIntersecting;
+      impressionEventHandler(isIntersecting);
+    },
+    { rootMargin, threshold: areaThreshold }
+  );
+}
+
+// src/utils/mergeRefs/mergeRefs.ts
+function mergeRefs(...refs) {
+  return (value) => {
+    for (const ref of refs) {
+      if (ref == null) {
+        continue;
+      }
+      if (typeof ref === "function") {
+        ref(value);
+        continue;
+      }
+      ref.current = value;
+    }
+  };
+}
+
+// src/components/ImpressionArea/ImpressionArea.tsx
+import { jsx } from "react/jsx-runtime";
+function ImpressionArea({
+  as,
+  rootMargin,
+  areaThreshold,
+  timeThreshold,
+  onImpressionStart,
+  onImpressionEnd,
+  ref,
+  ...props
+}) {
+  const Component = as ?? "div";
+  const impressionRef = useImpressionRef({
+    onImpressionStart,
+    onImpressionEnd,
+    areaThreshold,
+    timeThreshold,
+    rootMargin
+  });
+  return /* @__PURE__ */ jsx(Component, { ref: mergeRefs(ref, impressionRef), ...props });
+}
+export {
+  ImpressionArea
+};

package/esm/components/Separated/index.d.mts

@@ -0,0 +1,38 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+type Props = {
+    with: ReactNode;
+    children: ReactNode;
+};
+/**
+ * @description
+ * `Separated` is a component that inserts a specified component between each child element.
+ * It is useful for adding separators, spacing, or other repeating elements in lists.
+ *
+ * @param {React.ReactNode} children - The child elements to render.
+ *   Only valid React elements (`React.isValidElement`) will be rendered.
+ * @param {React.ReactNode} with - The component to insert between child elements.
+ *
+ * @returns {JSX.Element} A React component that separates children with a specified separator.
+ *
+ * @example
+ * function App() {
+ *   return (
+ *     <Separated with={<Border type="padding24" />}>
+ *       {['hello', 'react', 'world'].map(item => (
+ *         <div key={item}>{item}</div>
+ *       ))}
+ *     </Separated>
+ *   );
+ *   // Expected output:
+ *   // <div>hello</div>
+ *   // <Border type="padding24" />
+ *   // <div>react</div>
+ *   // <Border type="padding24" />
+ *   // <div>world</div>
+ * }
+ */
+declare function Separated({ children, with: separator }: Props): react_jsx_runtime.JSX.Element;
+
+export { Separated };

package/esm/components/Separated/index.mjs

@@ -0,0 +1,13 @@
+// src/components/Separated/Separated.tsx
+import { Children, Fragment, isValidElement } from "react";
+import { Fragment as Fragment2, jsx, jsxs } from "react/jsx-runtime";
+function Separated({ children, with: separator }) {
+  const childrenArray = Children.toArray(children).filter(isValidElement);
+  return /* @__PURE__ */ jsx(Fragment2, { children: childrenArray.map((child, i, { length }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+    child,
+    i + 1 !== length ? separator : null
+  ] }, i)) });
+}
+export {
+  Separated
+};

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

@@ -0,0 +1,46 @@
+import { ReactElement } from 'react';
+
+type StringifiedValue<T> = T extends boolean ? 'true' | 'false' : T extends number ? `${T}` : 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 {string | number} value - The value to compare against.
+ *   The component associated with the matching key in `caseBy` will be rendered.
+ * @param {Record<string | number, () => JSX.Element>} 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 {() => JSX.Element} defaultComponent - The component to render if `value` does not match
+ *   any key in `caseBy`.
+ *
+ * @returns {JSX.Element} 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 };

package/esm/components/SwitchCase/index.mjs

@@ -0,0 +1,8 @@
+// src/components/SwitchCase/SwitchCase.tsx
+function SwitchCase({ value, caseBy, defaultComponent = () => null }) {
+  const stringifiedValue = String(value);
+  return (caseBy[stringifiedValue] ?? defaultComponent)();
+}
+export {
+  SwitchCase
+};

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

@@ -0,0 +1,25 @@
+import { DependencyList } from 'react';
+
+/**
+ * @description
+ * `useAsyncEffect` is a custom 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 };

package/esm/hooks/useAsyncEffect/index.mjs

@@ -0,0 +1,16 @@
+// src/hooks/useAsyncEffect/useAsyncEffect.ts
+import { useEffect } from "react";
+function useAsyncEffect(effect, deps) {
+  useEffect(() => {
+    let cleanup;
+    effect().then((result) => {
+      cleanup = result;
+    });
+    return () => {
+      cleanup?.();
+    };
+  }, deps);
+}
+export {
+  useAsyncEffect
+};

package/esm/hooks/useBooleanState/index.d.mts

@@ -0,0 +1,19 @@
+/**
+ * @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);
+ */
+declare const useBooleanState: (defaultValue?: boolean) => readonly [boolean, () => void, () => void, () => void];
+
+export { useBooleanState };

package/esm/hooks/useBooleanState/index.mjs

@@ -0,0 +1,18 @@
+// src/hooks/useBooleanState/useBooleanState.ts
+import { useCallback, useState } from "react";
+var useBooleanState = (defaultValue = false) => {
+  const [bool, setBool] = useState(defaultValue);
+  const setTrue = useCallback(() => {
+    setBool(true);
+  }, []);
+  const setFalse = useCallback(() => {
+    setBool(false);
+  }, []);
+  const toggle = useCallback(() => {
+    setBool((b) => !b);
+  }, []);
+  return [bool, setTrue, setFalse, toggle];
+};
+export {
+  useBooleanState
+};