@bgord/ui 0.6.3 → 0.6.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/dialog.d.ts +3 -1
- package/dist/hooks/index.d.ts +0 -1
- package/dist/hooks/use-field.d.ts +5 -100
- package/dist/index.js +1 -1
- package/dist/services/autocomplete.d.ts +17 -7
- package/dist/services/form.d.ts +8 -0
- package/package.json +1 -1
- package/readme.md +0 -1
- package/dist/hooks/use-client-filter.d.ts +0 -20
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
import type React from "react";
|
|
2
2
|
import * as hooks from "../hooks";
|
|
3
|
-
export type DialogPropsType = hooks.UseToggleReturnType & React.JSX.IntrinsicElements["dialog"]
|
|
3
|
+
export type DialogPropsType = hooks.UseToggleReturnType & React.JSX.IntrinsicElements["dialog"] & {
|
|
4
|
+
locked?: boolean;
|
|
5
|
+
};
|
|
4
6
|
export declare function Dialog(props: DialogPropsType): import("react/jsx-runtime").JSX.Element;
|
package/dist/hooks/index.d.ts
CHANGED
|
@@ -1,127 +1,32 @@
|
|
|
1
1
|
import { type FieldValueAllowedTypes } from "../services/field";
|
|
2
|
-
|
|
3
|
-
type NewFieldNameType = string;
|
|
4
|
-
/** Valid HTML elements that can be used as field inputs */
|
|
2
|
+
type FieldNameType = string;
|
|
5
3
|
export type FieldElementType = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
|
|
6
|
-
/**
|
|
7
|
-
* Defines the strategy for field value persistence
|
|
8
|
-
* @enum {string}
|
|
9
|
-
*/
|
|
10
|
-
export declare enum useFieldStrategyEnum {
|
|
11
|
-
/** Store field value in URL parameters */
|
|
12
|
-
params = "params",
|
|
13
|
-
/** Store field value in local state */
|
|
14
|
-
local = "local"
|
|
15
|
-
}
|
|
16
|
-
/**
|
|
17
|
-
* Configuration options for the useField hook
|
|
18
|
-
* @template T - Type of the field value
|
|
19
|
-
*/
|
|
20
4
|
export type useFieldConfigType<T extends FieldValueAllowedTypes> = {
|
|
21
|
-
|
|
22
|
-
name: NewFieldNameType;
|
|
23
|
-
/** Initial value for the field */
|
|
5
|
+
name: FieldNameType;
|
|
24
6
|
defaultValue?: T;
|
|
25
|
-
/** Strategy for value persistence */
|
|
26
|
-
strategy?: useFieldStrategyEnum;
|
|
27
7
|
};
|
|
28
|
-
/**
|
|
29
|
-
* Return type for the useField hook
|
|
30
|
-
* @template T - Type of the field value
|
|
31
|
-
*/
|
|
32
8
|
export type useFieldReturnType<T extends FieldValueAllowedTypes> = {
|
|
33
|
-
/** Current persistence strategy */
|
|
34
|
-
strategy: useFieldStrategyEnum;
|
|
35
|
-
/** Initial field value */
|
|
36
9
|
defaultValue: T;
|
|
37
|
-
/** Current field value */
|
|
38
|
-
currentValue: T;
|
|
39
|
-
/** Non-nullable field value, empty string for empty values */
|
|
40
10
|
value: NonNullable<T>;
|
|
41
|
-
/** Function to set field value */
|
|
42
11
|
set: (value: T) => void;
|
|
43
|
-
/** Change event handler for controlled components */
|
|
44
12
|
handleChange: (event: React.ChangeEvent<FieldElementType>) => void;
|
|
45
|
-
/** Reset field to default value */
|
|
46
13
|
clear: () => void;
|
|
47
|
-
/** Props for field label */
|
|
48
14
|
label: {
|
|
49
15
|
props: {
|
|
50
|
-
htmlFor:
|
|
16
|
+
htmlFor: FieldNameType;
|
|
51
17
|
};
|
|
52
18
|
};
|
|
53
|
-
/** Props for field input */
|
|
54
19
|
input: {
|
|
55
20
|
props: {
|
|
56
|
-
id:
|
|
57
|
-
name:
|
|
21
|
+
id: FieldNameType;
|
|
22
|
+
name: FieldNameType;
|
|
58
23
|
value: NonNullable<T>;
|
|
59
24
|
onChange: (event: React.ChangeEvent<FieldElementType>) => void;
|
|
60
25
|
};
|
|
61
26
|
};
|
|
62
|
-
/** Whether field value differs from default */
|
|
63
27
|
changed: boolean;
|
|
64
|
-
/** Whether field value equals default */
|
|
65
28
|
unchanged: boolean;
|
|
66
|
-
/** Whether field is empty */
|
|
67
29
|
empty: boolean;
|
|
68
30
|
};
|
|
69
|
-
/**
|
|
70
|
-
* Hook for managing form field state with URL parameters or local state
|
|
71
|
-
*
|
|
72
|
-
* @template T - Type of the field value
|
|
73
|
-
* @param {useFieldConfigType<T>} config - Field configuration
|
|
74
|
-
* @returns {useFieldReturnType<T>} Field state and handlers
|
|
75
|
-
*
|
|
76
|
-
* @example
|
|
77
|
-
* ```tsx
|
|
78
|
-
* // Using local strategy
|
|
79
|
-
* function NameField() {
|
|
80
|
-
* const field = useField({
|
|
81
|
-
* name: "username",
|
|
82
|
-
* defaultValue: "",
|
|
83
|
-
* strategy: useFieldStrategyEnum.local
|
|
84
|
-
* });
|
|
85
|
-
*
|
|
86
|
-
* return (
|
|
87
|
-
* <div>
|
|
88
|
-
* <label {...field.label.props}>Username:</label>
|
|
89
|
-
* <input
|
|
90
|
-
* {...field.input.props}
|
|
91
|
-
* type="text"
|
|
92
|
-
* value={field.value}
|
|
93
|
-
* onChange={field.handleChange}
|
|
94
|
-
* />
|
|
95
|
-
* </div>
|
|
96
|
-
* );
|
|
97
|
-
* }
|
|
98
|
-
*
|
|
99
|
-
* // Using URL parameters strategy
|
|
100
|
-
* function SearchField() {
|
|
101
|
-
* const field = useField({
|
|
102
|
-
* name: "q",
|
|
103
|
-
* strategy: useFieldStrategyEnum.params
|
|
104
|
-
* });
|
|
105
|
-
*
|
|
106
|
-
* return (
|
|
107
|
-
* <input
|
|
108
|
-
* type="search"
|
|
109
|
-
* {...field.input.props}
|
|
110
|
-
* value={field.value}
|
|
111
|
-
* onChange={field.handleChange}
|
|
112
|
-
* />
|
|
113
|
-
* );
|
|
114
|
-
* }
|
|
115
|
-
* ```
|
|
116
|
-
*/
|
|
117
31
|
export declare function useField<T extends FieldValueAllowedTypes>(config: useFieldConfigType<T>): useFieldReturnType<T>;
|
|
118
|
-
/**
|
|
119
|
-
* Utility class for working with local fields
|
|
120
|
-
* @static
|
|
121
|
-
*/
|
|
122
|
-
export declare class LocalFields {
|
|
123
|
-
static clearAll(fields: {
|
|
124
|
-
clear: VoidFunction;
|
|
125
|
-
}[]): () => void;
|
|
126
|
-
}
|
|
127
32
|
export {};
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{useEffect as
|
|
1
|
+
import{useEffect as $,useRef as J}from"react";import{useEffect as C}from"react";function R(e,t){C(()=>{if(typeof document>"u")return;function r(n){let o=e.current;if(!o)return;if(o.contains(n.target))if(n.target===o){let{left:i,right:a,top:s,bottom:p}=o.getBoundingClientRect(),m=n instanceof MouseEvent?n.clientX:n.touches[0].clientX,f=n instanceof MouseEvent?n.clientY:n.touches[0].clientY;if(m>=i&&m<=a&&f>=s&&f<=p)return}else return;t(n)}return document.addEventListener("mousedown",r),document.addEventListener("touchstart",r),()=>{document.removeEventListener("mousedown",r),document.removeEventListener("touchstart",r)}},[e,t])}import I from"react";function le(e){let[t,r]=I.useState("idle"),n=(a)=>{if(a.preventDefault(),t==="idle")r("exiting")},o=(a)=>{if(a.animationName!==e.animation)return;e.action(),r("gone")},i=t==="exiting"?{"data-animation":e.animation,onAnimationEnd:o}:void 0;return{visible:t!=="gone",attach:i,trigger:n}}import{useState as A}from"react";class c{static emptyValue=void 0;static isEmpty(e){return e===void 0||e===""||e===null}static compare(e,t){if(c.isEmpty(e)&&c.isEmpty(t))return!0;return e===t}value=c.emptyValue;constructor(e){this.value=c.isEmpty(e)?c.emptyValue:e}get(){return this.value}isEmpty(){return c.isEmpty(this.value)}}function de(e){let t=new c(e.defaultValue),[r,n]=A(t.get()),o=c.isEmpty(r)?"":r,i=(s)=>n(new c(s).get()),a=(s)=>i(s.currentTarget.value);return{defaultValue:t.get(),value:o,set:i,handleChange:a,clear:()=>i(t.get()),label:{props:{htmlFor:e.name}},input:{props:{id:e.name,name:e.name,value:o,onChange:a}},changed:!c.compare(r,t.get()),unchanged:c.compare(r,t.get()),empty:c.isEmpty(r)}}import{useMemo as k,useState as h}from"react";var H;((n)=>{n.idle="idle";n.selected="selected";n.error="error"})(H||={});function xe(e,t){let r=t?.maxSizeBytes??Number.POSITIVE_INFINITY,[n,o]=h(0),[i,a]=h("idle"),[s,p]=h(null);function m(u){let y=u.currentTarget.files;if(!y?.[0])return;let x=y[0];if(x.size>r){a("error");return}if(!t.mimeTypes.includes(x.type)){a("error");return}return p(x),a("selected"),x}function f(){o((u)=>u+1),p(null),a("idle")}let U=k(()=>s?URL.createObjectURL(s):void 0,[s]);function v(u){return u.some((y)=>y===i)}let g={actions:{selectFile:m,clearFile:f},input:{props:{id:e,name:e,multiple:!1,accept:t.mimeTypes.join(",")},key:n},label:{props:{htmlFor:e}},matches:v};if(i==="idle")return{data:null,isError:!1,isIdle:!0,isSelected:!1,state:i,...g};if(i==="selected")return{data:s,isError:!1,isIdle:!1,isSelected:!0,preview:U,state:i,...g};return{data:null,isError:!0,isIdle:!1,isSelected:!1,state:i,...g}}import{useCallback as P,useMemo as W,useRef as q}from"react";import{useEffect as M}from"react";import{tinykeys as O}from"tinykeys";function T(e,t){let r=t?.enabled??!0;M(()=>{if(!r)return;let n=O(window,e);return()=>n()},[e,r])}function Re(e){let t=q(null),r=P(()=>{if(t.current)t.current.focus()},[]);return T({[e]:r}),W(()=>({ref:t}),[])}import{useCallback as D,useRef as N}from"react";import{useState as X}from"react";function S({name:e,defaultValue:t=!1}){let[r,n]=X(t);return{on:r,off:!r,enable:()=>n(!0),disable:()=>n(!1),toggle:()=>n((m)=>!m),props:{controller:{"aria-expanded":r?"true":"false","aria-controls":e,role:"button",tabIndex:0},target:{id:e,role:"region","aria-hidden":r?"false":"true"}}}}function F(e){let{on:t,off:r,enable:n,disable:o,toggle:i,props:a,...s}=e;return{toggle:{on:t,off:r,enable:n,disable:o,toggle:i,props:a},rest:s}}function Ce(e){let t=e?.enabled??!0,r=S({name:"_internal"}),n=N(null),o=typeof window<"u"&&"PointerEvent"in window?"pointerenter":"mouseenter",i=typeof window<"u"&&"PointerEvent"in window?"pointerleave":"mouseleave";return{attach:{ref:D((s)=>{let p=n.current;if(p)p.removeEventListener(o,r.enable),p.removeEventListener(i,r.disable);if(n.current=s,s&&t)s.addEventListener(o,r.enable),s.addEventListener(i,r.disable)},[o,i,t,r.enable,r.disable])},hovering:r.on&&t}}import{useCallback as B}from"react";function ke(){return{onKeyDown:B((t)=>{if(!t.metaKey||t.key!=="Enter")return;t.preventDefault(),t.currentTarget.form?.requestSubmit()},[])}}import{useEffect as K}from"react";function w(e=!0){K(()=>{if(typeof document>"u")return;let t=document.body.style.overflow;if(e)document.body.style.overflow="hidden";return()=>{document.body.style.overflow=t}},[e])}function d(){}import{jsx as Y}from"react/jsx-runtime";function Ve(e){let t=e.locked??!1,{toggle:r,rest:n}=F(e),o=J(null);return $(()=>{if(e.on)o.current?.showModal();else o.current?.close()},[e.on]),T({Escape:t?d:r.disable}),w(e.on),R(o,t?d:r.disable),Y("dialog",{ref:o,tabIndex:0,"aria-modal":"true","data-disp":e.on?"flex":"none","data-dir":"column","data-mx":"auto","data-p":"5","data-position":"fixed","data-z":"2","data-bg":"neutral-900","data-br":"xs","data-backdrop":"stronger","data-animation":"grow-fade-in",...n})}var et={email:{inputMode:"email",autoComplete:"email",autoCapitalize:"none",spellCheck:"false"},password:{new:{autoComplete:"new-password"},current:{autoComplete:"current-password"}},off:{autoComplete:"off",spellCheck:!1}};class j{static async copy(e){let t=e.onSuccess??d;if(!navigator.clipboard)return;await navigator.clipboard.writeText(e.text),t()}}import V from"js-cookie";class z{static extractFrom(e){return e.headers.get("cookie")??""}static set(e,t){V.set(e,t)}}class G{static fromRevision(e){return{"if-match":String(e)}}}function at(e){return function(){for(let t of e)t()}}class Q{static allUnchanged(e){return e.every((t)=>t.unchanged)}static allEmpty(e){return e.every((t)=>t.empty)}static anyEmpty(e){return e.some((t)=>t.empty)}static anyUnchanged(e){return e.some((t)=>t.unchanged)}static anyChanged(e){return e.some((t)=>t.changed)}}class Z{static input(e){let t=e.required??!0;if(e.min&&!e.max)return{pattern:`.{${e.min}}`,required:t};if(e.min&&e.max)return{pattern:`.{${e.min},${e.max}}`,required:t};if(!e.min&&e.max)return{pattern:`.{,${e.max}}`,required:t};return{pattern:void 0,required:t}}static textarea(e){let t=e.required??!0;if(e.min&&!e.max)return{minLength:e.min,required:t};if(e.min&&e.max)return{minLength:e.min,maxLength:e.max,required:t};if(!e.min&&e.max)return{maxLength:e.max,required:t};return{required:t}}static exact(e){let t=e.required??!0;return{pattern:e.text,required:t}}static date={min:{today:()=>new Date().toISOString().split("T")[0]},max:{today:()=>new Date().toISOString().split("T")[0]}}}function mt(){if(typeof window>"u")return;return window}import{polishPlurals as ee}from"polish-plurals";function L(e){if(e.language==="en"){let t=e.plural??`${e.singular}s`;if(e.value===1)return e.singular;return t}if(e.language==="pl"){let t=e.value??1;if(t===1)return e.singular;return ee(e.singular,String(e.plural),String(e.genitive),t)}return console.warn(`[@bgord/frontend] missing pluralization function for language: ${e.language}.`),e.singular}function yt(e=12){return{times(t){let r=e*t,n={height:{height:l(r)},minHeight:{minHeight:l(r)},maxHeight:{maxHeight:l(r)},width:{width:l(r)},minWidth:{minWidth:l(r)},maxWidth:{maxWidth:l(r)},square:{height:l(r),width:l(r)}},o={height:{style:{height:l(r)}},minHeight:{style:{minHeight:l(r)}},maxHeight:{style:{maxHeight:l(r)}},width:{style:{width:l(r)}},minWidth:{style:{minWidth:l(r)}},maxWidth:{style:{maxWidth:l(r)}},square:{style:{height:l(r),width:l(r)}}};return{px:l(r),raw:r,style:o,...n}}}}function l(e){return`${e}px`}import{createContext as te,use as E,useCallback as re}from"react";var b=te({translations:{},language:"en",supportedLanguages:{en:"en"}});function ht(){let e=E(b);if(e===void 0)throw Error("useTranslations must be used within the TranslationsContext");return re((r,n)=>{let o=e.translations[r];if(!o)return console.warn(`[@bgord/ui] missing translation for key: ${r}`),r;if(!n)return o;return Object.entries(n).reduce((i,[a,s])=>{let p=new RegExp(`{{${a}}}`,"g");return i.replace(p,String(s))},o)},[e.translations])}function ne(){let e=E(b);if(e===void 0)throw Error("useLanguage must be used within the TranslationsContext");return e.language}function Et(){let e=E(b);if(e===void 0)throw Error("useSupportedLanguages must be used within the TranslationsContext");return e.supportedLanguages}function bt(){let e=ne();return(t)=>L({...t,language:e})}class oe{static fromRevision(e){return{"if-match":`W/${e}`}}}export{ht as useTranslations,S as useToggle,Et as useSupportedLanguages,T as useShortcuts,w as useScrollLock,bt as usePluralize,ke as useMetaEnterSubmit,ne as useLanguage,Ce as useHover,Re as useFocusKeyboardShortcut,xe as useFile,de as useField,le as useExitAction,R as useClickOutside,L as pluralize,d as noop,mt as getSafeWindow,F as extractUseToggle,at as exec,oe as WeakETag,H as UseFileState,b as TranslationsContext,yt as Rhythm,Z as Form,Q as Fields,c as Field,G as ETag,Ve as Dialog,z as Cookies,j as Clipboard,et as Autocomplete};
|
|
@@ -1,10 +1,20 @@
|
|
|
1
|
-
|
|
2
|
-
email:
|
|
1
|
+
export declare const Autocomplete: {
|
|
2
|
+
email: {
|
|
3
|
+
inputMode: string;
|
|
4
|
+
autoComplete: string;
|
|
5
|
+
autoCapitalize: string;
|
|
6
|
+
spellCheck: string;
|
|
7
|
+
};
|
|
3
8
|
password: {
|
|
4
|
-
new:
|
|
5
|
-
|
|
9
|
+
new: {
|
|
10
|
+
autoComplete: string;
|
|
11
|
+
};
|
|
12
|
+
current: {
|
|
13
|
+
autoComplete: string;
|
|
14
|
+
};
|
|
15
|
+
};
|
|
16
|
+
off: {
|
|
17
|
+
autoComplete: string;
|
|
18
|
+
spellCheck: boolean;
|
|
6
19
|
};
|
|
7
|
-
off: React.JSX.IntrinsicElements["input"];
|
|
8
20
|
};
|
|
9
|
-
export declare const Autocomplete: AutocompleteType;
|
|
10
|
-
export {};
|
package/dist/services/form.d.ts
CHANGED
|
@@ -12,5 +12,13 @@ export declare class Form {
|
|
|
12
12
|
static input(config: PatternTextConfigType): React.ComponentPropsWithoutRef<"input">;
|
|
13
13
|
static textarea(config: PatternTextConfigType): React.ComponentPropsWithoutRef<"textarea">;
|
|
14
14
|
static exact(config: PatternExactConfigType): React.ComponentPropsWithoutRef<"input">;
|
|
15
|
+
static date: {
|
|
16
|
+
min: {
|
|
17
|
+
today: () => string;
|
|
18
|
+
};
|
|
19
|
+
max: {
|
|
20
|
+
today: () => string;
|
|
21
|
+
};
|
|
22
|
+
};
|
|
15
23
|
}
|
|
16
24
|
export {};
|
package/package.json
CHANGED
package/readme.md
CHANGED
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import { type FieldValueAllowedTypes } from "../services/field";
|
|
2
|
-
import { type useFieldConfigType, type useFieldReturnType, useFieldStrategyEnum } from "./use-field";
|
|
3
|
-
export type useClientFilterQueryType = string | undefined;
|
|
4
|
-
type useClientFilterConfigType<T extends FieldValueAllowedTypes> = Omit<useFieldConfigType<T>, "strategy"> & {
|
|
5
|
-
enum: {
|
|
6
|
-
[key: string]: useClientFilterQueryType;
|
|
7
|
-
};
|
|
8
|
-
filterFn?: (value: T) => boolean;
|
|
9
|
-
};
|
|
10
|
-
export type useClientFilterReturnType<T extends FieldValueAllowedTypes> = useFieldReturnType<T> & {
|
|
11
|
-
filterFn: NonNullable<useClientFilterConfigType<T>["filterFn"]>;
|
|
12
|
-
options: {
|
|
13
|
-
name: string;
|
|
14
|
-
value: useClientFilterConfigType<T>["enum"][0];
|
|
15
|
-
}[];
|
|
16
|
-
} & {
|
|
17
|
-
strategy: useFieldStrategyEnum.local;
|
|
18
|
-
};
|
|
19
|
-
export declare function useClientFilter<T extends FieldValueAllowedTypes>(config: useClientFilterConfigType<T>): useClientFilterReturnType<T>;
|
|
20
|
-
export {};
|