tycho-components 0.27.0 → 0.28.0

package/dist/common/AppForm/AppForm.d.ts

@@ -1,10 +1,10 @@
-import { UseFormReturn } from 'react-hook-form';
+import { FieldValues, UseFormReturn } from 'react-hook-form';
 import { SelectItem } from 'tycho-storybook';
 import { AppFormField } from './AppFormField';
 import './style.scss';
-type Props = {
+type Props<TFieldValues extends FieldValues = FieldValues, TContext = any, TTransformedValues = TFieldValues> = {
     fields: AppFormField[];
-    form: UseFormReturn<any, any, any>;
+    form: UseFormReturn<TFieldValues, TContext, TTransformedValues>;
     prefix?: string;
     onChangeFunctions?: Record<string, (v: string | number | boolean) => void>;
     onBlurFunctions?: Record<string, () => void>;
@@ -12,5 +12,5 @@ type Props = {
     runtimeLoadOptions?: Record<string, (query: string) => Promise<SelectItem[]>>;
     twoColumns?: boolean;
 };
-export default function AppForm({ fields, form, prefix, onChangeFunctions, onBlurFunctions, runtimeOptions, runtimeLoadOptions, twoColumns, }: Props): import("react/jsx-runtime").JSX.Element;
+export default function AppForm<TFieldValues extends FieldValues = FieldValues, TContext = any, TTransformedValues = TFieldValues>({ fields, form, prefix, onChangeFunctions, onBlurFunctions, runtimeOptions, runtimeLoadOptions, twoColumns, }: Props<TFieldValues, TContext, TTransformedValues>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/common/AppForm/FormColorField.d.ts

@@ -1,11 +1,11 @@
-import { UseFormReturn } from 'react-hook-form';
+import { FieldValues, UseFormReturn } from 'react-hook-form';
 import '../AppColorpicker/style.scss';
-type Props = {
+type Props<TFieldValues extends FieldValues = FieldValues, TContext = any, TTransformedValues = TFieldValues> = {
     attr: string;
     label: string;
-    form: UseFormReturn<any, any, any>;
+    form: UseFormReturn<TFieldValues, TContext, TTransformedValues>;
     disabled?: boolean;
     tooltipText?: string;
 };
-export default function FormColorField({ attr, label, form, disabled, tooltipText, }: Props): import("react/jsx-runtime").JSX.Element;
+export default function FormColorField<TFieldValues extends FieldValues = FieldValues, TContext = any, TTransformedValues = TFieldValues>({ attr, label, form, disabled, tooltipText, }: Props<TFieldValues, TContext, TTransformedValues>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/common/AppForm/FormColorField.js

@@ -6,15 +6,16 @@ import { Button, Icon, Tooltip } from 'tycho-storybook';
 import '../AppColorpicker/style.scss';
 const defaultColor = '#FFFFFF';
 export default function FormColorField({ attr, label, form, disabled, tooltipText, }) {
+    const fieldName = attr;
     const { t } = useTranslation('common');
-    const formValue = form.watch(attr);
+    const formValue = form.watch(fieldName);
     const [openColor, setOpenColor] = useState(false);
     const [color, setColor] = useState(defaultColor);
     useEffect(() => {
         setColor(formValue || defaultColor);
     }, [formValue]);
     const handleConfirm = () => {
-        form.setValue(attr, color, { shouldDirty: true });
+        form.setValue(fieldName, color, { shouldDirty: true });
         setOpenColor(false);
     };
     return (_jsxs("div", { className: "form-color-field", children: [_jsxs("div", { className: "form-color-field-label", children: [_jsx("span", { children: label }), tooltipText && (_jsx(Tooltip, { title: tooltipText, children: _jsx("span", { children: _jsx(Icon, { name: "help", className: "info", size: "x-small" }) }) }))] }), _jsxs("div", { className: "color-picker-container", children: [_jsx("div", { className: "swatch", style: { backgroundColor: color }, onClick: () => !disabled && setOpenColor(!openColor), onKeyDown: () => !disabled && setOpenColor(!openColor), role: "link", "aria-label": "open color picker", tabIndex: disabled ? -1 : 0 }), openColor && !disabled && (_jsxs(_Fragment, { children: [_jsx(HexColorPicker, { color: color, onChange: setColor }), _jsxs("div", { className: "buttons", children: [_jsx(Button, { text: t('button.confirm'), onClick: handleConfirm, size: "x-small" }), _jsx(Button, { text: t('button.cancel'), onClick: () => setOpenColor(false), color: "danger", size: "x-small" })] })] }))] })] }));

package/dist/common/AppSwitchGroup/AppSwitchGroup.d.ts

@@ -1,12 +1,12 @@
-import { UseFormReturn } from 'react-hook-form';
+import { FieldValues, UseFormReturn } from 'react-hook-form';
 import { AppFormField } from '../AppForm/AppFormField';
 import './style.scss';
-type Props = {
+type Props<TFieldValues extends FieldValues = FieldValues, TContext = any, TTransformedValues = TFieldValues> = {
     fields: AppFormField[];
-    form: UseFormReturn<any, any, any>;
+    form: UseFormReturn<TFieldValues, TContext, TTransformedValues>;
     onToggle: (attr: string, value: boolean) => void;
     hasRole?: (role: string) => boolean;
     className?: string;
 };
-export default function AppSwitchGroup({ fields, form, onToggle, hasRole, className, }: Props): import("react/jsx-runtime").JSX.Element;
+export default function AppSwitchGroup<TFieldValues extends FieldValues = FieldValues, TContext = any, TTransformedValues = TFieldValues>({ fields, form, onToggle, hasRole, className, }: Props<TFieldValues, TContext, TTransformedValues>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/functions/FilterUtils.d.ts

@@ -1,13 +1,13 @@
-import { UseFormReturn } from 'react-hook-form';
+import { FieldValues, UseFormReturn } from 'react-hook-form';
 export type DefaultOption = {
     label: string;
     value: any;
 };
 declare const FilterUtils: {
-    apply: (form: UseFormReturn<any>, setFilter: (f: any) => void, onClose: () => void, emptyPageable: any) => void;
-    clear: (form: UseFormReturn<any>, setFilter: (f: any) => void, onClose: () => void, clearValues: any) => void;
+    apply: <T extends FieldValues, TContext = any, TTransformedValues = T>(form: UseFormReturn<T, TContext, TTransformedValues>, setFilter: (f: any) => void, onClose: () => void, emptyPageable: any) => void;
+    clear: <T extends FieldValues, TContext = any, TTransformedValues = T>(form: UseFormReturn<T, TContext, TTransformedValues>, setFilter: (f: any) => void, onClose: () => void, clearValues: any) => void;
     isSelected: (filter: any) => boolean;
-    reset: (form: UseFormReturn<any>, setFilter: (p: any) => void, clearValues: any) => void;
-    enter: (form: UseFormReturn<any>, setFilter: (f: any) => void, event: React.KeyboardEvent<HTMLDivElement>, onClose: () => void, emptyPageable: any) => void;
+    reset: <T extends FieldValues, TContext = any, TTransformedValues = T>(form: UseFormReturn<T, TContext, TTransformedValues>, setFilter: (p: any) => void, clearValues: any) => void;
+    enter: <T extends FieldValues, TContext = any, TTransformedValues = T>(form: UseFormReturn<T, TContext, TTransformedValues>, setFilter: (f: any) => void, event: React.KeyboardEvent<HTMLDivElement>, onClose: () => void, emptyPageable: any) => void;
 };
 export default FilterUtils;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tycho-components",
   "private": false,
-  "version": "0.27.0",
+  "version": "0.28.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {
@@ -82,7 +82,7 @@
     "react-i18next": "^13.0.2",
     "react-router-dom": "^6.14.2",
     "react-toastify": "^9.1.3",
-    "tycho-storybook": "0.9.5",
+    "tycho-storybook": "0.10.0",
     "wavesurfer-react": "^2.2.2",
     "wavesurfer.js": "^6.6.3"
   },
@@ -107,9 +107,11 @@
     "eslint-plugin-storybook": "^0.11.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-hook-form": "7.78.0",
     "react-toastify": "^9.1.3",
     "sass-embedded": "^1.97.2",
     "storybook": "^10.1.11",
+    "tycho-storybook": "^0.10.0",
     "typescript": "^5.7.3",
     "vite": "^7.0.0",
     "vitest": "^3.2.6",