@react5/ui 1.0.26 → 1.0.28

package/packages/lib/src/components/Typography/Typography.tsx

@@ -1,20 +1,20 @@
-import { ReactNode } from "react"
-import './Typography.scss'
-import clsx from "clsx";
-import { bem } from '../../utils/bem';
-
-export interface ITypographyProps {
-  onClick?: () => void;
-  children: ReactNode
-  className?: string
-  variant?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'li' | 'div',
-  align?: "left" | "center" | "right";
-}
-const b = bem("typography");
-export const Typography = ({children, onClick, className, align = "left", variant: Variant = "p"}: ITypographyProps) => {
-  return (
-    <Variant
-      className={clsx(b(), b(Variant), b(align), className)}
-      onClick={onClick}
-    >{children}</Variant>)
+import { ReactNode } from "react"
+import './Typography.scss'
+import clsx from "clsx";
+import { bem } from '../../utils/bem';
+
+export interface ITypographyProps {
+  onClick?: () => void;
+  children: ReactNode
+  className?: string
+  variant?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'li' | 'div',
+  align?: "left" | "center" | "right";
+}
+const b = bem("typography");
+export const Typography = ({children, onClick, className, align = "left", variant: Variant = "p"}: ITypographyProps) => {
+  return (
+    <Variant
+      className={clsx(b(), b(Variant), b(align), className)}
+      onClick={onClick}
+    >{children}</Variant>)
 }

package/packages/lib/src/components/index.tsx

@@ -1,35 +1,35 @@
-export * from "./Accordion";
-export * from "./Button";
-export * from "./ButtonsGroup";
-export * from "./CheckBox";
-export * from "./DialogPrompt";
-export * from "./Divider";
-export * from "./DropDown";
-export * from "./Form";
-export * from "./FormButtons";
-export * from "./IconButton";
-export * from "./MenuItem";
-export * from "./Modal";
-export * from "./Navbar";
-export * from "./NavbarLink";
-export * from "./NavbarMenu";
-export * from "./Panel";
-export * from "./Paper";
-export * from "./RangeSlider";
-export * from "./ResponsiveBar";
-export * from "./ScrollView";
-export * from "./Section";
-export * from "./SelectField";
-export * from "./Spacer";
-export * from "./StackPanel";
-export * from "./Submenu";
-export * from "./SuccessCongratulation";
-export * from "./TextArea";
-export * from "./TextField";
-export * from "./TitleEdit";
-export * from "./Toast";
-export * from "./ToggleButton";
-export * from "./Toolbar";
-export * from "./Typography";
-
+export * from "./Accordion";
+export * from "./Button";
+export * from "./ButtonsGroup";
+export * from "./CheckBox";
+export * from "./DialogPrompt";
+export * from "./Divider";
+export * from "./DropDown";
+export * from "./Form";
+export * from "./FormButtons";
+export * from "./IconButton";
+export * from "./MenuItem";
+export * from "./Modal";
+export * from "./Navbar";
+export * from "./NavbarLink";
+export * from "./NavbarMenu";
+export * from "./Panel";
+export * from "./Paper";
+export * from "./RangeSlider";
+export * from "./ResponsiveBar";
+export * from "./ScrollView";
+export * from "./Section";
+export * from "./SelectField";
+export * from "./Spacer";
+export * from "./StackPanel";
+export * from "./Submenu";
+export * from "./SuccessCongratulation";
+export * from "./TextArea";
+export * from "./TextField";
+export * from "./TitleEdit";
+export * from "./Toast";
+export * from "./ToggleButton";
+export * from "./Toolbar";
+export * from "./Typography";
+
 export * from './HeaderButtons'

package/packages/lib/src/hooks/index.tsx

@@ -1,4 +1,4 @@
-export * from './use-click-outside'
-export * from './use-keys-enteresc'
-export * from './use-set-startup-focus'
+export * from './use-click-outside'
+export * from './use-keys-enteresc'
+export * from './use-set-startup-focus'
 export * from './use-form'

package/packages/lib/src/hooks/use-click-outside.tsx

@@ -1,20 +1,20 @@
-import { RefObject, useEffect } from "react";
-
-export function useClickOutside(refs: RefObject<HTMLElement | null>[], onClickOutside: () => void) {
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      const isOutside = refs.every(ref => ref.current && !ref.current.contains(event.target as Node));
-      if (isOutside) {
-        onClickOutside();
-      }
-    };
-
-    document.addEventListener("mousedown", handleClickOutside);
-    
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, [refs, onClickOutside]);
-}
-
+import { RefObject, useEffect } from "react";
+
+export function useClickOutside(refs: RefObject<HTMLElement | null>[], onClickOutside: () => void) {
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      const isOutside = refs.every(ref => ref.current && !ref.current.contains(event.target as Node));
+      if (isOutside) {
+        onClickOutside();
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [refs, onClickOutside]);
+}
+
 export default useClickOutside;

package/packages/lib/src/hooks/use-form.tsx

@@ -1,107 +1,107 @@
-import { useState, ChangeEvent, FormEvent } from 'react';
-
-type FormFields = Record<string, any>;
-type Validator<T> = (values: T) => Partial<Record<keyof T, string>>;
-
-type ChEv = ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>;
-interface IRegisterInfo {
-  name: string,
-  onChange: (e: ChEv) => (void),
-  value?: any,
-  checked?: boolean,
-  error?: string
-};
-
-interface IRegisterInfo2 {
-  name: string,
-  onChange: (v: any) => (void),
-  value?: any,
-  checked?: boolean,
-  error?: string
-};
-
-export function useForm<T extends FormFields>(
-  initialValues: T,
-  validate?: Validator<T>
-) {
-  const [values, setValues] = useState<T>(initialValues);
-  const [errors, setErrors] = useState<Partial<Record<keyof T, string>>>({});
-
-  // Standard change handler for native elements
-  const handleChange = (
-    e: ChEv
-  ) => {
-    const { name, type, value } = e.target;
-    const fieldValue = type === 'checkbox' ? (e.target as HTMLInputElement).checked : value;
-
-    setValues((prevValues) => {
-      const newValues = { ...prevValues, [name]: fieldValue };
-      if (validate) {
-        const newErrors = validate(newValues);
-        setErrors(newErrors);
-      }
-      return newValues;
-    });
-  };
-
-  const handleCustomChange = (name: string) => (v: any) => {
-    const fieldValue = v;
-
-    setValues((prevValues) => {
-      const newValues = { ...prevValues, [name]: fieldValue };
-      if (validate) {
-        const newErrors = validate(newValues);
-        setErrors(newErrors);
-      }
-      return newValues;
-    });
-  }
-
-  // New helper: update a specific field directly.
-  const setFieldValue = <K extends keyof T>(field: K, value: T[K]) => {
-    setValues((prevValues) => {
-      const newValues = { ...prevValues, [field]: value };
-      if (validate) {
-        const newErrors = validate(newValues);
-        setErrors(newErrors);
-      }
-      return newValues;
-    });
-  };
-
-  const validateForm = (): Partial<Record<keyof T, string>> => {
-    if (validate) {
-      const newErrors = validate(values);
-      setErrors(newErrors);
-      return newErrors;
-    }
-    return {};
-  };
-
-  const reset = (newValues = initialValues) => {
-    setValues(newValues);
-    setErrors({});
-  };
-
-  const register = (name: string): IRegisterInfo => {
-    const cm = {name, value: values[name] || '', checked: values[name] || false, error: errors[name]};
-    return {...cm, onChange: handleChange };
-  }
-  const registerC = (name: string): IRegisterInfo2 => {
-    const cm = {name, value: values[name] || '', checked: values[name] || false, error: errors[name]};
-    return {...cm, onChange: handleCustomChange(name) };
-  }
-
-  const handleFormSubmit = (onUserSubmit?: (data: T) => void) => (e: FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    onUserSubmit?.(values);
-
-    reset();
-  }
-
-  const registerForm = (onUserSubmit?: (data: T) => void) => {
-    return { onSubmit: handleFormSubmit(onUserSubmit) };
-  }
-
-  return { values, errors, handleChange, setFieldValue, reset, setValues, validateForm, register, registerC, registerForm };
-}
+import { useState, ChangeEvent, FormEvent } from 'react';
+
+type FormFields = Record<string, any>;
+type Validator<T> = (values: T) => Partial<Record<keyof T, string>>;
+
+type ChEv = ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>;
+interface IRegisterInfo {
+  name: string,
+  onChange: (e: ChEv) => (void),
+  value?: any,
+  checked?: boolean,
+  error?: string
+};
+
+interface IRegisterInfo2 {
+  name: string,
+  onChange: (v: any) => (void),
+  value?: any,
+  checked?: boolean,
+  error?: string
+};
+
+export function useForm<T extends FormFields>(
+  initialValues: T,
+  validate?: Validator<T>
+) {
+  const [values, setValues] = useState<T>(initialValues);
+  const [errors, setErrors] = useState<Partial<Record<keyof T, string>>>({});
+
+  // Standard change handler for native elements
+  const handleChange = (
+    e: ChEv
+  ) => {
+    const { name, type, value } = e.target;
+    const fieldValue = type === 'checkbox' ? (e.target as HTMLInputElement).checked : value;
+
+    setValues((prevValues) => {
+      const newValues = { ...prevValues, [name]: fieldValue };
+      if (validate) {
+        const newErrors = validate(newValues);
+        setErrors(newErrors);
+      }
+      return newValues;
+    });
+  };
+
+  const handleCustomChange = (name: string) => (v: any) => {
+    const fieldValue = v;
+
+    setValues((prevValues) => {
+      const newValues = { ...prevValues, [name]: fieldValue };
+      if (validate) {
+        const newErrors = validate(newValues);
+        setErrors(newErrors);
+      }
+      return newValues;
+    });
+  }
+
+  // New helper: update a specific field directly.
+  const setFieldValue = <K extends keyof T>(field: K, value: T[K]) => {
+    setValues((prevValues) => {
+      const newValues = { ...prevValues, [field]: value };
+      if (validate) {
+        const newErrors = validate(newValues);
+        setErrors(newErrors);
+      }
+      return newValues;
+    });
+  };
+
+  const validateForm = (): Partial<Record<keyof T, string>> => {
+    if (validate) {
+      const newErrors = validate(values);
+      setErrors(newErrors);
+      return newErrors;
+    }
+    return {};
+  };
+
+  const reset = (newValues = initialValues) => {
+    setValues(newValues);
+    setErrors({});
+  };
+
+  const register = (name: string): IRegisterInfo => {
+    const cm = {name, value: values[name] || '', checked: values[name] || false, error: errors[name]};
+    return {...cm, onChange: handleChange };
+  }
+  const registerC = (name: string): IRegisterInfo2 => {
+    const cm = {name, value: values[name] || '', checked: values[name] || false, error: errors[name]};
+    return {...cm, onChange: handleCustomChange(name) };
+  }
+
+  const handleFormSubmit = (onUserSubmit?: (data: T) => void) => (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    onUserSubmit?.(values);
+
+    reset();
+  }
+
+  const registerForm = (onUserSubmit?: (data: T) => void) => {
+    return { onSubmit: handleFormSubmit(onUserSubmit) };
+  }
+
+  return { values, errors, handleChange, setFieldValue, reset, setValues, validateForm, register, registerC, registerForm };
+}

package/packages/lib/src/hooks/use-keys-enteresc.tsx

@@ -1,26 +1,26 @@
-import { useEffect, RefObject } from "react";
-
-export function useKeysEneterEsc(inputRef: RefObject<HTMLInputElement|null>, onOk: () => void, onCancel?: () => void) {
-  
-  useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-
-      if (e.key === 'Enter') {
-        onOk();
-        e.preventDefault();
-      } else if (e.key === 'Escape') {
-        onCancel && onCancel();
-        e.preventDefault();
-      }
-    };
-    const inputElement = inputRef.current;
-    if (inputElement) {
-      inputElement.addEventListener('keydown', handleKeyDown);
-    }
-    return () => {
-      if (inputElement) {
-        inputElement.removeEventListener('keydown', handleKeyDown);
-      }
-    };
-  }, [inputRef, onOk, onCancel]);
+import { useEffect, RefObject } from "react";
+
+export function useKeysEneterEsc(inputRef: RefObject<HTMLInputElement|null>, onOk: () => void, onCancel?: () => void) {
+  
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+
+      if (e.key === 'Enter') {
+        onOk();
+        e.preventDefault();
+      } else if (e.key === 'Escape') {
+        onCancel && onCancel();
+        e.preventDefault();
+      }
+    };
+    const inputElement = inputRef.current;
+    if (inputElement) {
+      inputElement.addEventListener('keydown', handleKeyDown);
+    }
+    return () => {
+      if (inputElement) {
+        inputElement.removeEventListener('keydown', handleKeyDown);
+      }
+    };
+  }, [inputRef, onOk, onCancel]);
 }

package/packages/lib/src/hooks/use-set-startup-focus.tsx

@@ -1,9 +1,9 @@
-import { RefObject, useEffect } from "react";
-
-export function useSetStartupFocus(inputRef: RefObject<HTMLElement | null>, enabled: boolean = true) {
-  useEffect(() => {
-    if (enabled && inputRef.current) {
-      inputRef.current.focus();
-    }
-  }, [enabled, inputRef]);
+import { RefObject, useEffect } from "react";
+
+export function useSetStartupFocus(inputRef: RefObject<HTMLElement | null>, enabled: boolean = true) {
+  useEffect(() => {
+    if (enabled && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [enabled, inputRef]);
 }

package/packages/lib/src/i18n/config.ts

@@ -1,9 +1,9 @@
-import { type i18n } from 'i18next';
-import en from './en/translation.json';
-import fr from './fr/translation.json';
-import { translationNs } from './ns';
-
-export function addTranslations(n: i18n) {
-  n.addResourceBundle('en', translationNs, en, true, true);
-  n.addResourceBundle('fr', translationNs, fr, true, true);
+import { type i18n } from 'i18next';
+import en from './en/translation.json';
+import fr from './fr/translation.json';
+import { translationNs } from './ns';
+
+export function addTranslations(n: i18n) {
+  n.addResourceBundle('en', translationNs, en, true, true);
+  n.addResourceBundle('fr', translationNs, fr, true, true);
 }

package/packages/lib/src/i18n/en/translation.json

@@ -1,12 +1,12 @@
-{
-  "core": {
-    "edit": "Edit",
-    "view": "View",
-    "name": "Name",
-    "title": "Title",
-    "description": "Description",
-    "next": "Next",
-    "previous": "Previous",
-    "settings": "Settings"
-  }
+{
+  "core": {
+    "edit": "Edit",
+    "view": "View",
+    "name": "Name",
+    "title": "Title",
+    "description": "Description",
+    "next": "Next",
+    "previous": "Previous",
+    "settings": "Settings"
+  }
 }

package/packages/lib/src/i18n/fr/translation.json

@@ -1,12 +1,12 @@
-{
-  "core": {
-    "view": "Voir",
-    "edit": "Editer",
-    "name": "Nom",
-    "title": "Titre",
-    "description": "Description",
-    "next": "Suivant",
-    "previous": "Précédent",
-    "settings": "Paramètres"
-  }
+{
+  "core": {
+    "view": "Voir",
+    "edit": "Editer",
+    "name": "Nom",
+    "title": "Titre",
+    "description": "Description",
+    "next": "Suivant",
+    "previous": "Précédent",
+    "settings": "Paramètres"
+  }
 }

package/packages/lib/src/i18n/index.ts

@@ -1,11 +1,11 @@
-export * from './config';
-
-export function ta(t: Function, key: string, options?: any): string[] | null {
-  const a = t(key, { ...options, returnObjects: true }) as unknown;
-  return Array.isArray(a) ? a as string[] : null;
-}
-
-export function to(t: Function, key: string, options?: any): unknown | null {
-  const a = t(key, { ...options, returnObjects: true }) as unknown;
-  return a;
-}
+export * from './config';
+
+export function ta(t: Function, key: string, options?: any): string[] | null {
+  const a = t(key, { ...options, returnObjects: true }) as unknown;
+  return Array.isArray(a) ? a as string[] : null;
+}
+
+export function to(t: Function, key: string, options?: any): unknown | null {
+  const a = t(key, { ...options, returnObjects: true }) as unknown;
+  return a;
+}

package/packages/lib/src/index.tsx

@@ -1,7 +1,7 @@
-import "./styles/1-color-vars.scss";
-import "./styles/2-font-variables.scss";
-import "./index.scss";
-export * from "./i18n";
-export * from "./components";
-export * from "./utils";
-export * from "./hooks";
+import "./styles/1-color-vars.scss";
+import "./styles/2-font-variables.scss";
+import "./index.scss";
+export * from "./i18n";
+export * from "./components";
+export * from "./utils";
+export * from "./hooks";