Document AutoNumericInput (#5)

Author: xuhdev

package.json

@@ -2,7 +2,7 @@
   "name": "react-autonumeric",
   "version": "1.0.0",
   "type": "module",
-  "main": "dist/index.js",
+  "browser": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
     "/dist/*.d.ts",
@@ -14,14 +14,23 @@
     "dev": "vite",
     "compile": "tsc --build . src/lib src/test src/demo",
     "coverage": "vitest run --coverage --typecheck",
-    "doc": "npm run compile && typedoc && replace-in-files --string '=\"assets/' --replacement '=\"/assets/' docs/404.html",
+    "doc": "typedoc && replace-in-files --string '=\"assets/' --replacement '=\"/assets/' docs/404.html",
     "format": "eslint --fix . && prettier . --write",
     "lint": "eslint . --report-unused-disable-directives --max-warnings 0 && prettier . --check",
+    "prepack": "npm run clean && npm run compile",
     "preview": "vite preview",
     "test": "vitest --typecheck",
     "test-once": "npm run coverage",
     "test-all": "npm run lint && npm run compile && npm run test-once && npm run doc"
   },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/8hobbies/react-autonumeric.git"
+  },
+  "keywords": [
+    "react",
+    "autonumeric"
+  ],
   "dependencies": {
     "@8hobbies/utils": "^1.2.1",
     "autonumeric": "^4.10.5",

src/lib/AutoNumericInput.tsx

@@ -17,12 +17,56 @@
 
 import type { ChangeEvent, ClassAttributes, InputHTMLAttributes } from "react";
 import AutoNumericComponent from "./AutoNumericComponent";
+import type { CallbackOptions } from "autonumeric";
 
-type InputProps = Omit<
+/** Same as {@link JSX!IntrinsicElements.input.props} excluding the `ref` property. */
+export type InputProps = Omit<
   InputHTMLAttributes<HTMLInputElement> & ClassAttributes<HTMLInputElement>,
   "ref"
 >;
 
+/** React {@link JSX!IntrinsicElements.input} component integrated with {@link !AutoNumeric}.
+ *
+ * @param options - Options of the component.
+ * @param options.inputProps - Options passed to {@link JSX!IntrinsicElements.input}. Same as {@link
+ * JSX!IntrinsicElements.input.props} excluding the `ref` property.
+ * @param options.autoNumericOptions - Options passed to {@link !AutoNumeric}. Same as {@link
+ * AutoNumeric!Options}.
+ * @returns The React component.
+ */
+export function AutoNumericInput({
+  inputProps,
+  autoNumericOptions,
+}: {
+  inputProps?: InputProps;
+  autoNumericOptions?: CallbackOptions;
+}): JSX.Element;
+
+/** React {@link JSX!IntrinsicElements.input} component integrated with {@link !AutoNumeric} and
+ * permits interaction with a React state.
+ *
+ * @param options - Options of the component.
+ * @param options.inputProps - Options passed to {@link JSX!IntrinsicElements.input}. Same as {@link
+ * JSX!IntrinsicElements.input.props}.
+ * @param options.autoNumericOptions - Options passed to {@link !AutoNumeric}. Same as {@link
+ * AutoNumeric!Options}.
+ * @param options.valueState - The state from the parent component to be passed in.
+ * @param options.valueStateSetter - The callback function that sets `options.valueState`.
+ * @returns The React component.
+ */
+// eslint-disable-next-line @typescript-eslint/unified-signatures
+export function AutoNumericInput({
+  inputProps,
+  autoNumericOptions,
+  valueState,
+  valueStateSetter,
+}: {
+  inputProps?: InputProps;
+  autoNumericOptions?: CallbackOptions;
+  valueState: string;
+  valueStateSetter: React.Dispatch<React.SetStateAction<string>>;
+}): JSX.Element;
+
 export function AutoNumericInput({
   inputProps,
   autoNumericOptions,
@@ -31,17 +75,13 @@ export function AutoNumericInput({
 }:
   | {
       inputProps?: InputProps;
-      autoNumericOptions?: Parameters<
-        typeof AutoNumericComponent
-      >[0]["autoNumericOptions"];
+      autoNumericOptions?: CallbackOptions;
       valueState: string;
       valueStateSetter: React.Dispatch<React.SetStateAction<string>>;
     }
   | {
       inputProps?: InputProps;
-      autoNumericOptions?: Parameters<
-        typeof AutoNumericComponent
-      >[0]["autoNumericOptions"];
+      autoNumericOptions?: CallbackOptions;
       valueState?: undefined;
       valueStateSetter?: undefined;
     }): JSX.Element {

typedoc.json

@@ -14,7 +14,15 @@
   "sitemapBaseUrl": "https://react-autonumeric.8hob.io",
   "externalSymbolLinkMappings": {
     "global": {
+      "AutoNumeric": "https://docs.autonumeric.org/Documentation/methods/",
       "typeof": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/typeof"
+    },
+    "JSX": {
+      "IntrinsicElements.input": "https://react.dev/reference/react-dom/components/input",
+      "IntrinsicElements.input.props": "https://react.dev/reference/react-dom/components/input#props"
+    },
+    "AutoNumeric": {
+      "Options": "https://docs.autonumeric.org/Documentation/configuration%20options/"
     }
   },
   "extraFooter": "&copy; 2024 <a href=\"https://8hob.io\">8 Hobbies, LLC</a>",