@bgord/ui 0.1.2 → 0.2.0

package/dist/hooks/index.d.ts

@@ -1 +1,2 @@
+export * from "./use-field";
 export * from "./use-toggle";

package/dist/hooks/use-field.d.ts

@@ -0,0 +1,155 @@
+import { FieldValueAllowedTypes } from "../services/field";
+/** Type for field names */
+type NewFieldNameType = string;
+/** Valid HTML elements that can be used as field inputs */
+export type FieldElementType = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
+/**
+ * Defines the strategy for field value persistence
+ * @enum {string}
+ */
+export declare enum useFieldStrategyEnum {
+    /** Store field value in URL parameters */
+    params = "params",
+    /** Store field value in local state */
+    local = "local"
+}
+/**
+ * Configuration options for the useField hook
+ * @template T - Type of the field value
+ */
+export type useFieldConfigType<T extends FieldValueAllowedTypes> = {
+    /** Unique identifier for the field */
+    name: NewFieldNameType;
+    /** Initial value for the field */
+    defaultValue?: T;
+    /** Strategy for value persistence */
+    strategy?: useFieldStrategyEnum;
+};
+/**
+ * Return type for the useField hook
+ * @template T - Type of the field value
+ */
+export type useFieldReturnType<T extends FieldValueAllowedTypes> = {
+    /** Current persistence strategy */
+    strategy: useFieldStrategyEnum;
+    /** Initial field value */
+    defaultValue: T;
+    /** Current field value */
+    currentValue: T;
+    /** Non-nullable field value, empty string for empty values */
+    value: NonNullable<T>;
+    /** Function to set field value */
+    set: (value: T) => void;
+    /** Change event handler for controlled components */
+    handleChange: (event: React.ChangeEvent<FieldElementType>) => void;
+    /** Reset field to default value */
+    clear: () => void;
+    /** Props for field label */
+    label: {
+        props: {
+            htmlFor: NewFieldNameType;
+        };
+    };
+    /** Props for field input */
+    input: {
+        props: {
+            id: NewFieldNameType;
+            name: NewFieldNameType;
+        };
+    };
+    /** Whether field value differs from default */
+    changed: boolean;
+    /** Whether field value equals default */
+    unchanged: boolean;
+    /** Whether field is empty */
+    empty: boolean;
+};
+/**
+ * Hook for managing form field state with URL parameters or local state
+ *
+ * @template T - Type of the field value
+ * @param {useFieldConfigType<T>} config - Field configuration
+ * @returns {useFieldReturnType<T>} Field state and handlers
+ *
+ * @example
+ * ```tsx
+ * // Using local strategy
+ * function NameField() {
+ *   const field = useField({
+ *     name: "username",
+ *     defaultValue: "",
+ *     strategy: useFieldStrategyEnum.local
+ *   });
+ *
+ *   return (
+ *     <div>
+ *       <label {...field.label.props}>Username:</label>
+ *       <input
+ *         {...field.input.props}
+ *         type="text"
+ *         value={field.value}
+ *         onChange={field.handleChange}
+ *       />
+ *     </div>
+ *   );
+ * }
+ *
+ * // Using URL parameters strategy
+ * function SearchField() {
+ *   const field = useField({
+ *     name: "q",
+ *     strategy: useFieldStrategyEnum.params
+ *   });
+ *
+ *   return (
+ *     <input
+ *       type="search"
+ *       {...field.input.props}
+ *       value={field.value}
+ *       onChange={field.handleChange}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+export declare function useField<T extends FieldValueAllowedTypes>(config: useFieldConfigType<T>): useFieldReturnType<T>;
+/**
+ * Utility class for working with multiple fields
+ * @static
+ */
+export declare class Fields {
+    /**
+     * Check if all fields are unchanged
+     * @param {Array<{unchanged: boolean}>} fields - Array of field states
+     * @returns {boolean} True if all fields match their default values
+     */
+    static allUnchanged(fields: {
+        unchanged: boolean;
+    }[]): boolean;
+    /**
+     * Check if any field is unchanged
+     * @param {Array<{unchanged: boolean}>} fields - Array of field states
+     * @returns {boolean} True if any field matches its default value
+     */
+    static anyUnchanged(fields: {
+        unchanged: boolean;
+    }[]): boolean;
+    /**
+     * Check if any field has changed
+     * @param {Array<{changed: boolean}>} fields - Array of field states
+     * @returns {boolean} True if any field differs from its default value
+     */
+    static anyChanged(fields: {
+        changed: boolean;
+    }[]): boolean;
+}
+/**
+ * Utility class for working with local fields
+ * @static
+ */
+export declare class LocalFields {
+    static clearAll(fields: {
+        clear: VoidFunction;
+    }[]): () => void;
+}
+export {};

package/dist/index.d.ts

@@ -1,2 +1,3 @@
-export * as hooks from "./hooks";
-export * as Components from "./components";
+export * from "./components";
+export * from "./hooks";
+export * from "./services";

package/dist/index.js

@@ -1,25 +1,105 @@
-var __defProp = Object.defineProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, {
-      get: all[name],
-      enumerable: true,
-      configurable: true,
-      set: (newValue) => all[name] = () => newValue
-    });
-};
+// src/components/button.tsx
+import { jsxDEV } from "react/jsx-dev-runtime";
+function Button() {
+  return /* @__PURE__ */ jsxDEV("button", {
+    type: "button",
+    children: "Click"
+  }, undefined, false, undefined, this);
+}
+// src/hooks/use-field.ts
+import { useEffect, useState } from "react";
+import { useSearchParams } from "react-router";
+
+// src/services/field.ts
+class Field {
+  static emptyValue = undefined;
+  static isEmpty(value) {
+    return value === undefined || value === "" || value === null;
+  }
+  static compare(one, another) {
+    if (Field.isEmpty(one) && Field.isEmpty(another)) {
+      return true;
+    }
+    return one === another;
+  }
+  value = Field.emptyValue;
+  constructor(value) {
+    this.value = Field.isEmpty(value) ? Field.emptyValue : value;
+  }
+  get() {
+    return this.value;
+  }
+  isEmpty() {
+    return Field.isEmpty(this.value);
+  }
+}
+
+// src/hooks/use-field.ts
+var useFieldStrategyEnum;
+((useFieldStrategyEnum2) => {
+  useFieldStrategyEnum2["params"] = "params";
+  useFieldStrategyEnum2["local"] = "local";
+})(useFieldStrategyEnum ||= {});
+function useField(config) {
+  const strategy = config.strategy ?? "local" /* local */;
+  const [params, setParams] = useSearchParams();
+  const givenValue = new Field(params.get(config.name));
+  const defaultValue = new Field(config.defaultValue);
+  const [currentValue, _setCurrentValue] = useState(givenValue.isEmpty() ? defaultValue.get() : givenValue.get());
+  const setCurrentValue = (value) => {
+    const candidate = new Field(value);
+    _setCurrentValue(candidate.get());
+  };
+  useEffect(() => {
+    const current = new Field(currentValue);
+    if (strategy === "params" /* params */) {
+      if (current.isEmpty()) {
+        params.delete(config.name);
+        setParams(params);
+      } else {
+        params.set(config.name, current.get());
+        setParams(params);
+      }
+    }
+    if (strategy === "local" /* local */) {}
+  }, [currentValue, params, setParams, config.name, strategy]);
+  return {
+    strategy,
+    defaultValue: defaultValue.get(),
+    currentValue,
+    value: Field.isEmpty(currentValue) ? "" : currentValue,
+    set: setCurrentValue,
+    handleChange: (event) => setCurrentValue(event.currentTarget.value),
+    clear: () => setCurrentValue(defaultValue.get()),
+    label: { props: { htmlFor: config.name } },
+    input: { props: { id: config.name, name: config.name } },
+    changed: !Field.compare(currentValue, defaultValue.get()),
+    unchanged: Field.compare(currentValue, defaultValue.get()),
+    empty: Field.isEmpty(currentValue)
+  };
+}
 
-// src/hooks/index.ts
-var exports_hooks = {};
-__export(exports_hooks, {
-  useToggle: () => useToggle,
-  extractUseToggle: () => extractUseToggle
-});
+class Fields {
+  static allUnchanged(fields) {
+    return fields.every((field) => field.unchanged);
+  }
+  static anyUnchanged(fields) {
+    return fields.some((field) => field.unchanged);
+  }
+  static anyChanged(fields) {
+    return fields.some((field) => field.changed);
+  }
+}
 
+class LocalFields {
+  static clearAll(fields) {
+    return () => fields.forEach((field) => field.clear());
+  }
+}
 // src/hooks/use-toggle.ts
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useMemo, useState as useState2 } from "react";
 function useToggle({ name, defaultValue = false }) {
-  const [on, setIsOn] = useState(defaultValue);
+  const [on, setIsOn] = useState2(defaultValue);
   const enable = useCallback(() => setIsOn(true), []);
   const disable = useCallback(() => setIsOn(false), []);
   const toggle = useCallback(() => setIsOn((v) => !v), []);
@@ -42,20 +122,69 @@ function extractUseToggle(_props) {
     rest
   };
 }
-// src/components/index.ts
-var exports_components = {};
-__export(exports_components, {
-  Button: () => Button
-});
-
-// src/components/button.tsx
-import { jsxDEV } from "react/jsx-dev-runtime";
-function Button() {
-  return /* @__PURE__ */ jsxDEV("button", {
-    children: "Click"
-  }, undefined, false, undefined, this);
+// src/services/form.ts
+class Form {
+  static inputPattern(config) {
+    const required = config.required ?? true;
+    if (config.min && !config.max)
+      return { pattern: `.{${config.min}}`, required };
+    if (config.min && config.max)
+      return { pattern: `.{${config.min},${config.max}}`, required };
+    if (!config.min && config.max)
+      return { pattern: `.{,${config.max}}`, required };
+    return { pattern: undefined, required };
+  }
+  static textareaPattern(config) {
+    const required = config.required ?? true;
+    if (config.min && !config.max)
+      return { minLength: config.min, required };
+    if (config.min && config.max)
+      return { minLength: config.min, maxLength: config.max, required };
+    if (!config.min && config.max)
+      return { maxLength: config.max, required };
+    return { required };
+  }
+}
+// src/services/rhythm.ts
+var DEFAULT_BASE_PX = 12;
+function Rhythm(base = DEFAULT_BASE_PX) {
+  return {
+    times(times) {
+      const result = base * times;
+      const dimensions = {
+        height: { height: px(result) },
+        minHeight: { minHeight: px(result) },
+        maxHeight: { maxHeight: px(result) },
+        width: { width: px(result) },
+        minWidth: { minWidth: px(result) },
+        maxWidth: { maxWidth: px(result) },
+        square: { height: px(result), width: px(result) }
+      };
+      const style = {
+        height: { style: { height: px(result) } },
+        minHeight: { style: { minHeight: px(result) } },
+        maxHeight: { style: { maxHeight: px(result) } },
+        width: { style: { width: px(result) } },
+        minWidth: { style: { minWidth: px(result) } },
+        maxWidth: { style: { maxWidth: px(result) } },
+        square: { style: { height: px(result), width: px(result) } }
+      };
+      return { px: px(result), raw: result, style, ...dimensions };
+    }
+  };
+}
+function px(number) {
+  return `${number}px`;
 }
 export {
-  exports_hooks as hooks,
-  exports_components as Components
+  useToggle,
+  useFieldStrategyEnum,
+  useField,
+  extractUseToggle,
+  Rhythm,
+  LocalFields,
+  Form,
+  Fields,
+  Field,
+  Button
 };

package/dist/services/field.d.ts

@@ -0,0 +1,10 @@
+export type FieldValueAllowedTypes = string | number | undefined | null;
+export declare class Field<T extends FieldValueAllowedTypes> {
+    static readonly emptyValue: undefined;
+    static isEmpty(value: FieldValueAllowedTypes): boolean;
+    static compare(one: FieldValueAllowedTypes, another: FieldValueAllowedTypes): boolean;
+    private readonly value;
+    constructor(value: FieldValueAllowedTypes);
+    get(): T;
+    isEmpty(): boolean;
+}

package/dist/services/form.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+type PatternConfigType = {
+    min?: number;
+    max?: number;
+    required?: React.JSX.IntrinsicElements["input"]["required"];
+};
+export declare class Form {
+    static inputPattern(config: PatternConfigType): React.ComponentPropsWithoutRef<"input">;
+    static textareaPattern(config: PatternConfigType): React.ComponentPropsWithoutRef<"textarea">;
+}
+export {};

package/dist/services/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./field";
+export * from "./form";
+export * from "./rhythm";

package/dist/services/rhythm.d.ts

@@ -0,0 +1,69 @@
+type RhythmBaseType = number;
+type RhythmTimesType = number;
+export declare function Rhythm(base?: RhythmBaseType): {
+    times(times: RhythmTimesType): {
+        height: {
+            height: string;
+        };
+        minHeight: {
+            minHeight: string;
+        };
+        maxHeight: {
+            maxHeight: string;
+        };
+        width: {
+            width: string;
+        };
+        minWidth: {
+            minWidth: string;
+        };
+        maxWidth: {
+            maxWidth: string;
+        };
+        square: {
+            height: string;
+            width: string;
+        };
+        px: string;
+        raw: number;
+        style: {
+            height: {
+                style: {
+                    height: string;
+                };
+            };
+            minHeight: {
+                style: {
+                    minHeight: string;
+                };
+            };
+            maxHeight: {
+                style: {
+                    maxHeight: string;
+                };
+            };
+            width: {
+                style: {
+                    width: string;
+                };
+            };
+            minWidth: {
+                style: {
+                    minWidth: string;
+                };
+            };
+            maxWidth: {
+                style: {
+                    maxWidth: string;
+                };
+            };
+            square: {
+                style: {
+                    height: string;
+                    width: string;
+                };
+            };
+        };
+    };
+};
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bgord/ui",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "type": "module",
   "exports": {
     ".": {
@@ -13,10 +13,11 @@
   ],
   "peerDependencies": {
     "react": "19.1.0",
-    "react-dom": "19.1.0"
+    "react-dom": "19.1.0",
+    "react-router": "7.6.3"
   },
   "scripts": {
-    "build:js": "bun build src/index.ts --format esm --outdir dist --packages external --external react --external react-dom --external react/jsx-runtime",
+    "build:js": "bun build src/index.ts --format esm --outdir dist --packages external --external react --external react-dom --external react/jsx-runtime --external react-router",
     "build:types": "bunx tsc --emitDeclarationOnly",
     "build": "bun run build:js && bun run build:types"
   },
@@ -24,7 +25,21 @@
     "access": "public"
   },
   "devDependencies": {
+    "@happy-dom/global-registrator": "18.0.1",
+    "@testing-library/dom": "10.4.0",
+    "@testing-library/jest-dom": "6.6.3",
+    "@testing-library/react": "16.3.0",
+    "@testing-library/user-event": "14.6.1",
+    "@types/bun": "1.2.18",
     "@types/react": "19.1.8",
-    "@types/react-dom": "19.1.6"
+    "@types/react-dom": "19.1.6",
+    "@biomejs/biome": "2.0.6",
+    "@commitlint/cli": "19.8.1",
+    "@commitlint/config-conventional": "19.8.1",
+    "cspell": "9.1.3",
+    "knip": "5.61.3",
+    "lefthook": "1.11.16",
+    "only-allow": "1.2.1",
+    "shellcheck": "3.1.0"
   }
 }