@bgord/ui 0.3.0 → 0.4.0

package/dist/index.js

@@ -105,7 +105,7 @@ class LocalFields {
   }
 }
 // src/hooks/use-hover.ts
-import { useCallback as useCallback2, useRef } from "react";
+import { useCallback, useRef } from "react";
 
 // src/hooks/use-toggle.ts
 import { useState as useState2 } from "react";
@@ -146,7 +146,7 @@ function useHover({
   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 = useCallback2((node) => {
+  const ref = useCallback((node) => {
     const prev = nodeRef.current;
     if (prev) {
       prev.removeEventListener(enterEvent, enable);
@@ -163,6 +163,19 @@ function useHover({
     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) {
@@ -204,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) {
@@ -235,17 +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/index.d.ts

@@ -1,4 +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.3.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.12.1",
+    "lefthook": "1.12.2",
     "only-allow": "1.2.1",
     "shellcheck": "3.1.0"
+  },
+  "dependencies": {
+    "polish-plurals": "^1.1.0"
   }
 }

package/dist/src/components/button.d.ts

@@ -1 +0,0 @@
-export declare function Button(): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/index.d.ts

@@ -1 +0,0 @@
-export * from "./button";

package/dist/src/hooks/index.d.ts

@@ -1,3 +0,0 @@
-export * from "./use-field";
-export * from "./use-hover";
-export * from "./use-toggle";

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

@@ -1,127 +0,0 @@
-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;
-            value: NonNullable<T>;
-            onChange: (event: React.ChangeEvent<FieldElementType>) => void;
-        };
-    };
-    /** 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 local fields
- * @static
- */
-export declare class LocalFields {
-    static clearAll(fields: {
-        clear: VoidFunction;
-    }[]): () => void;
-}
-export {};

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

@@ -1,12 +0,0 @@
-import { UseToggleReturnType } from "./use-toggle";
-type UseHoverConfigType = {
-    enabled?: boolean;
-};
-type UseHoverReturnType = {
-    attach: {
-        ref: React.RefObject<any>;
-    };
-    isHovering: UseToggleReturnType["on"];
-};
-export declare function useHover(config?: UseHoverConfigType): UseHoverReturnType;
-export {};

package/dist/src/hooks/use-toggle.d.ts

@@ -1,32 +0,0 @@
-export type UseToggleValueType = boolean;
-export type UseToggleConfigType = {
-    name: string;
-    defaultValue?: UseToggleValueType;
-};
-type UseToggleProps = {
-    controller: {
-        "aria-expanded": "true" | "false";
-        "aria-controls": string;
-        role: "button";
-        tabIndex: 0;
-    };
-    target: {
-        id: string;
-        role: "region";
-        "aria-hidden": "true" | "false";
-    };
-};
-export type UseToggleReturnType = {
-    on: UseToggleValueType;
-    off: UseToggleValueType;
-    enable: () => void;
-    disable: () => void;
-    toggle: () => void;
-    props: UseToggleProps;
-};
-export declare function useToggle({ name, defaultValue }: UseToggleConfigType): UseToggleReturnType;
-export declare function extractUseToggle<X>(_props: UseToggleReturnType & X): {
-    toggle: UseToggleReturnType;
-    rest: X;
-};
-export {};

package/dist/src/index.d.ts

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

package/dist/src/services/field.d.ts

@@ -1,10 +0,0 @@
-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/src/services/fields.d.ts

@@ -1,46 +0,0 @@
-/**
- * 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/src/services/form.d.ts

@@ -1,11 +0,0 @@
-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/src/services/index.d.ts

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

package/dist/src/services/rhythm.d.ts

@@ -1,69 +0,0 @@
-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 {};