@versini/ui-hooks 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Arno Versini
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,27 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+
+- Configure the top-level `parserOptions` property like this:
+
+```js
+   parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    project: ['./tsconfig.json', './tsconfig.node.json'],
+    tsconfigRootDir: __dirname,
+   },
+```
+
+- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
+- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list

package/dist/hooks/useMergeRefs.js

@@ -0,0 +1,12 @@
+import { useMemo as t } from "react";
+function o(r) {
+  return t(() => r.every((e) => e == null) ? () => {
+  } : (e) => {
+    r.forEach((n) => {
+      typeof n == "function" ? n(e) : n != null && (n.current = e);
+    });
+  }, r);
+}
+export {
+  o as useMergeRefs
+};

package/dist/hooks/useUncontrolled.js

@@ -0,0 +1,18 @@
+import { useState as s } from "react";
+function i({
+  value: r,
+  defaultValue: o,
+  finalValue: l,
+  onChange: t = () => {
+  }
+}) {
+  const [c, d] = s(
+    o !== void 0 ? o : l
+  ), n = (e) => {
+    d(e), t == null || t(e);
+  };
+  return r !== void 0 ? [r, t, !0] : [c, n, !1];
+}
+export {
+  i as useUncontrolled
+};

package/dist/hooks/useUniqueId.js

@@ -0,0 +1,15 @@
+import { useId as u } from "react";
+function i(e) {
+  const r = u();
+  if (!e)
+    return r;
+  if (typeof e == "number" || typeof e == "string")
+    return `${e}${r}`;
+  if (typeof e == "object") {
+    const { id: t, prefix: f = "" } = e;
+    return typeof t == "number" || typeof t == "string" ? `${f}${t}` : `${f}${r}`;
+  }
+}
+export {
+  i as useUniqueId
+};

package/dist/index.d.ts

@@ -0,0 +1,94 @@
+/**
+ * React utility to merge refs.
+ *
+ * When developing low level UI components, it is common to have to use a local
+ * ref but also support an external one using React.forwardRef. Natively, React
+ * does not offer a way to set two refs inside the ref property.
+ *
+ * @param Array of refs (object, function, etc.)
+ *
+ * @example
+ *
+ * const Example = React.forwardRef(function Example(props, ref) {
+ *   const localRef = React.useRef();
+ *   const mergedRefs = useMergeRefs([localRef, ref]);
+ *
+ *   return <div ref={mergedRefs} />;
+ * });
+ *
+ */
+declare function useMergeRefs<T = any>(refs: Array<React.MutableRefObject<T> | React.LegacyRef<T> | undefined | null>): React.RefCallback<T>;
+
+/**
+ * MIT License
+ *
+ * Copyright (c) 2021 Vitaly Rtishchev
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+interface UseUncontrolledInput<T> {
+    /** Value for controlled state */
+    value?: T;
+    /** Initial value for uncontrolled state */
+    defaultValue?: T;
+    /** Final value for uncontrolled state when value and defaultValue are not provided */
+    finalValue?: T;
+    /** Controlled state onChange handler */
+    onChange?: (value: T) => void;
+}
+declare function useUncontrolled<T>({ value, defaultValue, finalValue, onChange, }: UseUncontrolledInput<T>): [T, (value: T) => void, boolean];
+
+/**
+ * Hook that generates a unique id that will retain its value
+ * during the lifecycle of the calling functional component.
+ *
+ * The parameters are either
+ * - nothing: a unique id will simply be generated with no prefix.
+ * - a string or a number: a prefix to prepend to the generated id.
+ * - an object with the following props:
+ *    - id: if this is a number or a string, it will be returned as is
+ *    - prefix: prefix to prepend to the generated id.
+ *
+ * @param {string | number | object} options
+ * @returns a unique id
+ *
+ * @examples
+ *
+ * const someId = useUniqueId();
+ * // -> someId = "1j3h4f5"
+ *
+ * const errorId = useUniqueId("av-text-input-error-");
+ * // -> errorId = "av-text-input-error-1j3h4f5"
+ *
+ * const inputId = useUniqueId({ id: 42, prefix: "av-text-input-" });
+ * // -> inputId = "av-text-input-42"
+ *
+ * const inputHintId = useUniqueId({
+ *   prefix: "av-text-input-hint-",
+ * });
+ * // -> inputHintId = "av-text-input-hint-1j3h4f5"
+ *
+ */
+type UseUniqueIdOptions = string | number | {
+    id?: string | number;
+    prefix?: string;
+};
+declare function useUniqueId(options?: UseUniqueIdOptions): string | undefined;
+
+export { useMergeRefs, useUncontrolled, useUniqueId };

package/dist/index.js

@@ -0,0 +1,13 @@
+import { useMergeRefs as t } from "./hooks/useMergeRefs.js";
+import { useUncontrolled as m } from "./hooks/useUncontrolled.js";
+import { useUniqueId as s } from "./hooks/useUniqueId.js";
+import "react";
+/*!
+  @versini/ui-hooks v1.0.0
+  © 2024 gizmette.com
+*/
+export {
+  t as useMergeRefs,
+  m as useUncontrolled,
+  s as useUniqueId
+};

package/package.json

@@ -0,0 +1,45 @@
+{
+	"name": "@versini/ui-hooks",
+	"version": "1.0.0",
+	"license": "MIT",
+	"author": "Arno Versini",
+	"publishConfig": {
+		"access": "public"
+	},
+	"homepage": "https://github.com/aversini/ui-components/packages/ui-hooks",
+	"repository": {
+		"type": "git",
+		"url": "git@github.com:aversini/ui-components.git"
+	},
+	"type": "module",
+	"main": "dist/index.js",
+	"types": "dist/index.d.ts",
+	"files": [
+		"dist"
+	],
+	"scripts": {
+		"build:check": "tsc",
+		"build:js": "vite build",
+		"build:types": "tsup",
+		"build": "npm-run-all --serial clean build:check build:js build:types",
+		"clean": "rimraf dist",
+		"dev:js": "vite build --watch --mode development",
+		"dev:types": "tsup --watch src",
+		"dev": "npm-run-all clean --parallel dev:js dev:types",
+		"lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0 --fix --color",
+		"start": "static-server dist --port 5173",
+		"test:coverage:ui": "vitest --coverage --ui",
+		"test:coverage": "vitest run --coverage",
+		"test:watch": "vitest",
+		"test": "vitest run"
+	},
+	"peerDependencies": {
+		"react": "^18.2.0",
+		"react-dom": "^18.2.0"
+	},
+	"devDependencies": {
+		"react": "18.2.0",
+		"react-dom": "18.2.0"
+	},
+	"gitHead": "b3908b5958fb8dab384172191bab101229be48bd"
+}