@bgord/ui 0.2.0 → 0.4.0

package/dist/hooks/index.d.ts

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

package/dist/hooks/use-exit-action.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+type UseExitActionAnimationType = string;
+type UseExitActionOptionsType = {
+    actionFn: () => void;
+    animation: UseExitActionAnimationType;
+};
+type UseExitActionReturnType = {
+    visible: boolean;
+    trigger: (event: React.MouseEvent) => void;
+    attach: {
+        "data-exit": UseExitActionAnimationType;
+        onAnimationEnd: (event: React.AnimationEvent) => void;
+    } | undefined;
+};
+export declare function useExitAction(options: UseExitActionOptionsType): UseExitActionReturnType;
+export {};

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

@@ -55,6 +55,8 @@ export type useFieldReturnType<T extends FieldValueAllowedTypes> = {
         props: {
             id: NewFieldNameType;
             name: NewFieldNameType;
+            value: NonNullable<T>;
+            onChange: (event: React.ChangeEvent<FieldElementType>) => void;
         };
     };
     /** Whether field value differs from default */
@@ -113,36 +115,6 @@ export type useFieldReturnType<T extends FieldValueAllowedTypes> = {
  * ```
  */
 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

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

@@ -0,0 +1,11 @@
+type UseHoverConfigType = {
+    enabled?: boolean;
+};
+export type UseHoverReturnType<T extends HTMLElement> = {
+    attach: {
+        ref: React.RefCallback<T | null>;
+    };
+    isHovering: boolean;
+};
+export declare function useHover<T extends HTMLElement = HTMLElement>({ enabled, }?: UseHoverConfigType): UseHoverReturnType<T>;
+export {};

package/dist/index.js

@@ -6,6 +6,24 @@ function Button() {
     children: "Click"
   }, undefined, false, undefined, this);
 }
+// src/hooks/use-exit-action.ts
+import React from "react";
+function useExitAction(options) {
+  const [phase, setPhase] = React.useState("idle" /* idle */);
+  const trigger = (event) => {
+    event.preventDefault();
+    if (phase === "idle")
+      setPhase("exiting" /* exiting */);
+  };
+  const onAnimationEnd = (event) => {
+    if (event.animationName !== options.animation)
+      return;
+    options.actionFn();
+    setPhase("gone" /* gone */);
+  };
+  const attach = phase === "exiting" ? { "data-exit": options.animation, onAnimationEnd } : undefined;
+  return { visible: phase !== "gone", attach, trigger };
+}
 // src/hooks/use-field.ts
 import { useEffect, useState } from "react";
 import { useSearchParams } from "react-router";
@@ -46,8 +64,8 @@ function useField(config) {
   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);
+  const setCurrentValue = (value2) => {
+    const candidate = new Field(value2);
     _setCurrentValue(candidate.get());
   };
   useEffect(() => {
@@ -63,56 +81,53 @@ function useField(config) {
     }
     if (strategy === "local" /* local */) {}
   }, [currentValue, params, setParams, config.name, strategy]);
+  const value = Field.isEmpty(currentValue) ? "" : currentValue;
+  const onChange = (event) => setCurrentValue(event.currentTarget.value);
   return {
     strategy,
     defaultValue: defaultValue.get(),
     currentValue,
-    value: Field.isEmpty(currentValue) ? "" : currentValue,
+    value,
     set: setCurrentValue,
-    handleChange: (event) => setCurrentValue(event.currentTarget.value),
+    handleChange: onChange,
     clear: () => setCurrentValue(defaultValue.get()),
     label: { props: { htmlFor: config.name } },
-    input: { props: { id: config.name, name: config.name } },
+    input: { props: { id: config.name, name: config.name, value, onChange } },
     changed: !Field.compare(currentValue, defaultValue.get()),
     unchanged: Field.compare(currentValue, defaultValue.get()),
     empty: Field.isEmpty(currentValue)
   };
 }
 
-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-hover.ts
+import { useCallback, useRef } from "react";
+
 // src/hooks/use-toggle.ts
-import { useCallback, useMemo, useState as useState2 } from "react";
+import { useState as useState2 } from "react";
 function useToggle({ name, defaultValue = false }) {
-  const [on, setIsOn] = useState2(defaultValue);
-  const enable = useCallback(() => setIsOn(true), []);
-  const disable = useCallback(() => setIsOn(false), []);
-  const toggle = useCallback(() => setIsOn((v) => !v), []);
-  const off = useMemo(() => !on, [on]);
-  const props = useMemo(() => ({
+  const [on, setOn] = useState2(defaultValue);
+  const enable = () => setOn(true);
+  const disable = () => setOn(false);
+  const toggle = () => setOn((v) => !v);
+  const off = !on;
+  const props = {
     controller: {
       "aria-expanded": on ? "true" : "false",
       "aria-controls": name,
       role: "button",
       tabIndex: 0
     },
-    target: { id: name, role: "region", "aria-hidden": on ? "false" : "true" }
-  }), [on, name]);
+    target: {
+      id: name,
+      role: "region",
+      "aria-hidden": on ? "false" : "true"
+    }
+  };
   return { on, off, enable, disable, toggle, props };
 }
 function extractUseToggle(_props) {
@@ -122,6 +137,63 @@ function extractUseToggle(_props) {
     rest
   };
 }
+
+// src/hooks/use-hover.ts
+function useHover({
+  enabled = true
+} = {}) {
+  const { on: isOn, enable, disable } = useToggle({ name: "is-hovering" });
+  const nodeRef = useRef(null);
+  const enterEvent = typeof window !== "undefined" && "PointerEvent" in window ? "pointerenter" : "mouseenter";
+  const leaveEvent = typeof window !== "undefined" && "PointerEvent" in window ? "pointerleave" : "mouseleave";
+  const ref = useCallback((node) => {
+    const prev = nodeRef.current;
+    if (prev) {
+      prev.removeEventListener(enterEvent, enable);
+      prev.removeEventListener(leaveEvent, disable);
+    }
+    nodeRef.current = node;
+    if (node && enabled) {
+      node.addEventListener(enterEvent, enable);
+      node.addEventListener(leaveEvent, disable);
+    }
+  }, [enterEvent, leaveEvent, enabled, enable, disable]);
+  return {
+    attach: { ref },
+    isHovering: isOn && enabled
+  };
+}
+// src/services/colorful.ts
+function Colorful(color) {
+  const value = `var(--${color})`;
+  const options = {
+    color: { color: value },
+    background: { background: value }
+  };
+  const style = {
+    color: { style: { color: value } },
+    background: { style: { background: value } }
+  };
+  return { ...options, style };
+}
+// src/services/fields.ts
+class Fields {
+  static allUnchanged(fields) {
+    return fields.every((field) => field.unchanged);
+  }
+  static allEmpty(fields) {
+    return fields.every((field) => field.empty);
+  }
+  static anyEmpty(fields) {
+    return fields.some((field) => field.empty);
+  }
+  static anyUnchanged(fields) {
+    return fields.some((field) => field.unchanged);
+  }
+  static anyChanged(fields) {
+    return fields.some((field) => field.changed);
+  }
+}
 // src/services/form.ts
 class Form {
   static inputPattern(config) {
@@ -145,6 +217,24 @@ class Form {
     return { required };
   }
 }
+// src/services/pluralize.ts
+import { polishPlurals } from "polish-plurals";
+function pluralize(options) {
+  if (options.language === "en" /* en */) {
+    const plural = options.plural ?? `${options.singular}s`;
+    if (options.value === 1)
+      return options.singular;
+    return plural;
+  }
+  if (options.language === "pl" /* pl */) {
+    const value = options.value ?? 1;
+    if (value === 1)
+      return options.singular;
+    return polishPlurals(options.singular, String(options.plural), String(options.genitive), value);
+  }
+  console.warn(`[@bgord/frontend] missing pluralization function for language: ${options.language}.`);
+  return options.singular;
+}
 // src/services/rhythm.ts
 var DEFAULT_BASE_PX = 12;
 function Rhythm(base = DEFAULT_BASE_PX) {
@@ -176,15 +266,60 @@ function Rhythm(base = DEFAULT_BASE_PX) {
 function px(number) {
   return `${number}px`;
 }
+// src/services/translations.tsx
+import { createContext, use, useCallback as useCallback2 } from "react";
+var TranslationsContext = createContext({
+  translations: {},
+  language: "en"
+});
+function useTranslations() {
+  const value = use(TranslationsContext);
+  if (value === undefined) {
+    throw new Error("useTranslations must be used within the TranslationsContext");
+  }
+  const translate = useCallback2((key, variables) => {
+    const translation = value.translations[key];
+    if (!translation) {
+      console.warn(`[@bgord/ui] missing translation for key: ${key}`);
+      return key;
+    }
+    if (!variables)
+      return translation;
+    return Object.entries(variables).reduce((result, [placeholder, value2]) => {
+      const regex = new RegExp(`{{${placeholder}}}`, "g");
+      return result.replace(regex, String(value2));
+    }, translation);
+  }, [value.translations]);
+  return translate;
+}
+function useLanguage() {
+  const value = use(TranslationsContext);
+  if (value === undefined) {
+    throw new Error("useLanguage must be used within the TranslationsContext");
+  }
+  return value.language;
+}
+function usePluralize() {
+  const language = useLanguage();
+  return (options) => pluralize({ ...options, language });
+}
 export {
+  useTranslations,
   useToggle,
+  usePluralize,
+  useLanguage,
+  useHover,
   useFieldStrategyEnum,
   useField,
+  useExitAction,
+  pluralize,
   extractUseToggle,
+  TranslationsContext,
   Rhythm,
   LocalFields,
   Form,
   Fields,
   Field,
+  Colorful,
   Button
 };

package/dist/services/colorful.d.ts

@@ -0,0 +1,22 @@
+type ColorType = string;
+export declare function Colorful(color: ColorType): {
+    style: {
+        color: {
+            style: {
+                color: string;
+            };
+        };
+        background: {
+            style: {
+                background: string;
+            };
+        };
+    };
+    color: {
+        color: string;
+    };
+    background: {
+        background: string;
+    };
+};
+export {};

package/dist/services/fields.d.ts

@@ -0,0 +1,46 @@
+/**
+ * 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 all fields are empty
+     * @param {Array<{empty: boolean}>} fields - Array of field states
+     * @returns {boolean} True if all fields are empty
+     */
+    static allEmpty(fields: {
+        empty: boolean;
+    }[]): boolean;
+    /**
+     * Check if any field is empty
+     * @param {Array<{empty: boolean}>} fields - Array of field states
+     * @returns {boolean} True if any field is empty
+     */
+    static anyEmpty(fields: {
+        empty: 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;
+}

package/dist/services/index.d.ts

@@ -1,3 +1,7 @@
+export * from "./colorful";
 export * from "./field";
+export * from "./fields";
 export * from "./form";
+export * from "./pluralize";
 export * from "./rhythm";
+export * from "./translations";

package/dist/services/pluralize.d.ts

@@ -0,0 +1,11 @@
+type PluralizeWordType = string;
+type PluralizeValueType = number | null | undefined;
+export type PluralizeOptionsType = {
+    value: PluralizeValueType;
+    singular: PluralizeWordType;
+    plural?: PluralizeWordType;
+    genitive?: PluralizeWordType;
+    language: string;
+};
+export declare function pluralize(options: PluralizeOptionsType): PluralizeWordType;
+export {};

package/dist/services/translations.d.ts

@@ -0,0 +1,16 @@
+import { PluralizeOptionsType } from "./pluralize";
+export type TranslationsKeyType = string;
+export type TranslationsValueType = string;
+export type TranslationsType = Record<TranslationsKeyType, TranslationsValueType>;
+type TranslationPlaceholderType = string;
+type TranslationPlaceholderValueType = string | number;
+type TranslationVariableType = Record<TranslationPlaceholderType, TranslationPlaceholderValueType>;
+export type TranslationsContextValueType = {
+    translations: TranslationsType;
+    language: string;
+};
+export declare const TranslationsContext: import("react").Context<TranslationsContextValueType>;
+export declare function useTranslations(): (key: TranslationsKeyType, variables?: TranslationVariableType) => string;
+export declare function useLanguage(): TranslationsContextValueType["language"];
+export declare function usePluralize(): (options: Omit<PluralizeOptionsType, "language">) => string;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bgord/ui",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "type": "module",
   "exports": {
     ".": {
@@ -38,8 +38,11 @@
     "@commitlint/config-conventional": "19.8.1",
     "cspell": "9.1.3",
     "knip": "5.61.3",
-    "lefthook": "1.11.16",
+    "lefthook": "1.12.2",
     "only-allow": "1.2.1",
     "shellcheck": "3.1.0"
+  },
+  "dependencies": {
+    "polish-plurals": "^1.1.0"
   }
 }