@bgord/ui 0.4.1 → 0.5.1

package/dist/hooks/index.d.ts

@@ -1,4 +1,9 @@
+export * from "./use-client-filter";
 export * from "./use-exit-action";
 export * from "./use-field";
+export * from "./use-focus-shortcut";
 export * from "./use-hover";
+export * from "./use-language-selector";
+export * from "./use-meta-enter-submit";
+export * from "./use-shortcuts";
 export * from "./use-toggle";

package/dist/hooks/use-client-filter.d.ts

@@ -0,0 +1,20 @@
+import { FieldValueAllowedTypes } from "../services/field";
+import { useFieldConfigType, useFieldReturnType, useFieldStrategyEnum } from "./use-field";
+export type useClientFilterQueryType = string | undefined;
+type useClientFilterConfigType<T extends FieldValueAllowedTypes> = Omit<useFieldConfigType<T>, "strategy"> & {
+    enum: {
+        [key: string]: useClientFilterQueryType;
+    };
+    filterFn?: (value: T) => boolean;
+};
+export type useClientFilterReturnType<T extends FieldValueAllowedTypes> = useFieldReturnType<T> & {
+    filterFn: NonNullable<useClientFilterConfigType<T>["filterFn"]>;
+    options: {
+        name: string;
+        value: useClientFilterConfigType<T>["enum"][0];
+    }[];
+} & {
+    strategy: useFieldStrategyEnum.local;
+};
+export declare function useClientFilter<T extends FieldValueAllowedTypes>(config: useClientFilterConfigType<T>): useClientFilterReturnType<T>;
+export {};

package/dist/hooks/use-focus-shortcut.d.ts

@@ -0,0 +1,8 @@
+import { Ref } from "react";
+type FocusableElement = HTMLElement & {
+    focus(): void;
+};
+export declare function useFocusKeyboardShortcut<T extends FocusableElement = HTMLInputElement>(shortcut: string): {
+    ref: Ref<T>;
+};
+export {};

package/dist/hooks/use-language-selector.d.ts

@@ -0,0 +1,4 @@
+import { useClientFilterReturnType } from "./use-client-filter";
+type LanguageType = string;
+export declare function useLanguageSelector(supportedLanguages: Record<LanguageType, LanguageType>): useClientFilterReturnType<LanguageType>;
+export {};

package/dist/hooks/use-meta-enter-submit.d.ts

@@ -0,0 +1,3 @@
+export declare function useMetaEnterSubmit(): {
+    onKeyDown: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void;
+};

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

@@ -0,0 +1,8 @@
+interface UseKeyboardShortcutsConfigType {
+    [keybinding: string]: (event: KeyboardEvent) => void;
+}
+type UseKeyboardShortcutsOptionsType = {
+    enabled?: boolean;
+};
+export declare function useKeyboardShortcuts(config: UseKeyboardShortcutsConfigType, options?: UseKeyboardShortcutsOptionsType): void;
+export {};

package/dist/index.js

@@ -6,27 +6,8 @@ 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-animation": 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";
+// src/hooks/use-client-filter.ts
+import { useCallback, useMemo } from "react";
 
 // src/services/field.ts
 class Field {
@@ -53,6 +34,8 @@ class Field {
 }
 
 // src/hooks/use-field.ts
+import { useEffect, useState } from "react";
+import { useSearchParams } from "react-router";
 var useFieldStrategyEnum;
 ((useFieldStrategyEnum2) => {
   useFieldStrategyEnum2["params"] = "params";
@@ -104,8 +87,75 @@ class LocalFields {
     return () => fields.forEach((field) => field.clear());
   }
 }
+
+// src/hooks/use-client-filter.ts
+function useClientFilter(config) {
+  const query = useField({
+    ...config,
+    strategy: "local" /* local */
+  });
+  const defaultFilterFn = useCallback((given) => {
+    if (query.empty)
+      return true;
+    return Field.compare(given, query.currentValue);
+  }, [query.empty, query.currentValue]);
+  const filterFn = useMemo(() => config.filterFn ?? defaultFilterFn, [config.filterFn, defaultFilterFn]);
+  const options = useMemo(() => Object.entries(config.enum).map(([name, value]) => ({ name, value })), [config.enum]);
+  return useMemo(() => ({
+    ...query,
+    filterFn,
+    options,
+    strategy: "local" /* local */
+  }), [query, filterFn, options]);
+}
+// 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-animation": options.animation, onAnimationEnd } : undefined;
+  return { visible: phase !== "gone", attach, trigger };
+}
+// src/hooks/use-focus-shortcut.ts
+import { useCallback as useCallback2, useMemo as useMemo3, useRef } from "react";
+
+// src/hooks/use-shortcuts.ts
+import { useEffect as useEffect2, useMemo as useMemo2 } from "react";
+import { tinykeys } from "tinykeys";
+function useKeyboardShortcuts(config, options) {
+  const enabled = options?.enabled ?? true;
+  const memoizedConfig = useMemo2(() => config, [JSON.stringify(Object.keys(config))]);
+  useEffect2(() => {
+    if (!enabled)
+      return;
+    const unsubscribe = tinykeys(window, memoizedConfig);
+    return () => unsubscribe();
+  }, [memoizedConfig, enabled]);
+}
+
+// src/hooks/use-focus-shortcut.ts
+function useFocusKeyboardShortcut(shortcut) {
+  const ref = useRef(null);
+  const handleFocus = useCallback2(() => {
+    if (ref.current) {
+      ref.current.focus();
+    }
+  }, []);
+  useKeyboardShortcuts({ [shortcut]: handleFocus });
+  return useMemo3(() => ({ ref }), []);
+}
 // src/hooks/use-hover.ts
-import { useCallback, useRef } from "react";
+import { useCallback as useCallback3, useRef as useRef2 } from "react";
 
 // src/hooks/use-toggle.ts
 import { useState as useState2 } from "react";
@@ -143,10 +193,10 @@ function useHover({
   enabled = true
 } = {}) {
   const { on: isOn, enable, disable } = useToggle({ name: "is-hovering" });
-  const nodeRef = useRef(null);
+  const nodeRef = useRef2(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 ref = useCallback3((node) => {
     const prev = nodeRef.current;
     if (prev) {
       prev.removeEventListener(enterEvent, enable);
@@ -163,6 +213,102 @@ function useHover({
     isHovering: isOn && enabled
   };
 }
+// src/hooks/use-language-selector.tsx
+import Cookies from "js-cookie";
+import { useCallback as useCallback5, useEffect as useEffect3 } from "react";
+import { useRevalidator } from "react-router";
+
+// src/services/translations.tsx
+import { createContext, use, useCallback as useCallback4 } from "react";
+
+// 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/translations.tsx
+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 = useCallback4((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 });
+}
+
+// src/hooks/use-language-selector.tsx
+function useLanguageSelector(supportedLanguages) {
+  const language = useLanguage();
+  const revalidator = useRevalidator();
+  const field = useClientFilter({
+    enum: supportedLanguages,
+    defaultValue: language,
+    name: "language"
+  });
+  const handleLanguageChange = useCallback5(() => {
+    const current = new Field(field.currentValue);
+    if (!current.isEmpty() && field.changed) {
+      Cookies.set("language", String(current.get()));
+      revalidator.revalidate();
+    }
+  }, [field.currentValue, field.changed]);
+  useEffect3(() => {
+    handleLanguageChange();
+  }, [handleLanguageChange]);
+  return field;
+}
+// src/hooks/use-meta-enter-submit.tsx
+import { useCallback as useCallback6, useMemo as useMemo4 } from "react";
+function useMetaEnterSubmit() {
+  const handleMetaEnterSubmit = useCallback6((event) => {
+    if (event.key !== "Enter" || !event.metaKey)
+      return;
+    event.preventDefault();
+    event.currentTarget.form?.requestSubmit();
+  }, []);
+  return useMemo4(() => ({ onKeyDown: handleMetaEnterSubmit }), [handleMetaEnterSubmit]);
+}
 // src/services/colorful.ts
 function Colorful(color) {
   const value = `var(--${color})`;
@@ -182,6 +328,14 @@ class ETag {
     return { "if-match": String(revision) };
   }
 }
+// src/services/exec.ts
+function exec(list) {
+  return function() {
+    for (const item of list) {
+      item();
+    }
+  };
+}
 // src/services/fields.ts
 class Fields {
   static allUnchanged(fields) {
@@ -223,23 +377,11 @@ 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/get-safe-window.ts
+function getSafeWindow() {
+  if (typeof window === "undefined")
+    return;
+  return window;
 }
 // src/services/rhythm.ts
 var DEFAULT_BASE_PX = 12;
@@ -272,43 +414,6 @@ 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 });
-}
 // src/services/weak-etag.ts
 class WeakETag {
   static fromRevision(revision) {
@@ -319,13 +424,20 @@ export {
   useTranslations,
   useToggle,
   usePluralize,
+  useMetaEnterSubmit,
+  useLanguageSelector,
   useLanguage,
+  useKeyboardShortcuts,
   useHover,
+  useFocusKeyboardShortcut,
   useFieldStrategyEnum,
   useField,
   useExitAction,
+  useClientFilter,
   pluralize,
+  getSafeWindow,
   extractUseToggle,
+  exec,
   WeakETag,
   TranslationsContext,
   Rhythm,

package/dist/services/exec.d.ts

@@ -0,0 +1,3 @@
+type ExecFunctionListType = Array<() => void>;
+export declare function exec(list: ExecFunctionListType): () => void;
+export {};

package/dist/services/get-safe-window.d.ts

@@ -0,0 +1 @@
+export declare function getSafeWindow(): (Window & typeof globalThis) | undefined;

package/dist/services/index.d.ts

@@ -1,8 +1,10 @@
 export * from "./colorful";
 export * from "./etag";
+export * from "./exec";
 export * from "./field";
 export * from "./fields";
 export * from "./form";
+export * from "./get-safe-window";
 export * from "./pluralize";
 export * from "./rhythm";
 export * from "./translations";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bgord/ui",
-  "version": "0.4.1",
+  "version": "0.5.1",
   "type": "module",
   "exports": {
     ".": {
@@ -25,17 +25,18 @@
     "access": "public"
   },
   "devDependencies": {
+    "@biomejs/biome": "2.0.6",
+    "@commitlint/cli": "19.8.1",
+    "@commitlint/config-conventional": "19.8.1",
     "@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/js-cookie": "^3.0.6",
     "@types/react": "19.1.8",
     "@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.5",
     "knip": "5.61.3",
     "lefthook": "1.12.2",
@@ -43,6 +44,8 @@
     "shellcheck": "3.1.0"
   },
   "dependencies": {
-    "polish-plurals": "^1.1.0"
+    "js-cookie": "3.0.5",
+    "polish-plurals": "1.1.0",
+    "tinykeys": "3.0.0"
   }
 }

package/readme.md

@@ -27,16 +27,23 @@ src/
 ├── components
 │   ├── button.tsx
 ├── hooks
+│   ├── use-client-filter.ts
 │   ├── use-exit-action.ts
 │   ├── use-field.ts
+│   ├── use-focus-shortcut.ts
 │   ├── use-hover.ts
+│   ├── use-language-selector.tsx
+│   ├── use-meta-enter-submit.tsx
+│   ├── use-shortcuts.ts
 │   └── use-toggle.ts
 └── services
     ├── colorful.ts
     ├── etag.ts
+    ├── exec.ts
     ├── field.ts
     ├── fields.ts
     ├── form.ts
+    ├── get-safe-window.ts
     ├── pluralize.ts
     ├── rhythm.ts
     ├── translations.tsx