@stack-spot/portal-components 2.21.2 → 2.22.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [2.22.0](https://github.com/stack-spot/portal-commons/compare/portal-components@v2.21.2...portal-components@v2.22.0) (2025-04-25)
+
+
+### Features
+
+* add component form ([fbc608d](https://github.com/stack-spot/portal-commons/commit/fbc608d0b2aaa8f99fc154a6a79141984c93daf3))
+
 ## [2.21.2](https://github.com/stack-spot/portal-commons/compare/portal-components@v2.21.1...portal-components@v2.21.2) (2025-04-24)
 
 

package/dist/components/Stepper/Stepper.d.ts

@@ -26,6 +26,10 @@ export interface StepperContextProps {
      * Navigate to the previous step.
      */
     goToPreviousStep: () => void;
+    /**
+     * Navigate to the provided step.
+     */
+    goToStep: (step: number) => void;
 }
 declare const StepperContext: import("react").Context<StepperContextProps>;
 export interface StepperProps {

package/dist/components/Stepper/Stepper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Stepper.d.ts","sourceRoot":"","sources":["../../../src/components/Stepper/Stepper.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAE,YAAY,EAA2B,MAAM,OAAO,CAAA;AAGjE,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAElC,MAAM,WAAW,mBAAmB;IAClC;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC/B;;OAEG;IACH,WAAW,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IAC/C;;OAEG;IACH,WAAW,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,GAAG,GAAG,IAAI,GAAG,SAAS,CAAC;IACtD;;OAEG;IACH,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB;;OAEG;IACH,gBAAgB,EAAE,MAAM,IAAI,CAAC;CAC9B;AAED,QAAA,MAAM,cAAc,8CAOlB,CAAA;AAEF,MAAM,WAAW,YAAY;IAC3B,QAAQ,EAAE,YAAY,CAAC,SAAS,CAAC,EAAE,CAAC;CACrC;AAWD;;;;GAIG;AAEH,QAAA,MAAM,OAAO,EAAE,EAAE,CAAC,YAAY,CA0C7B,CAAA;AACD,OAAO,EAAE,cAAc,EAAE,OAAO,EAAE,CAAA"}
+{"version":3,"file":"Stepper.d.ts","sourceRoot":"","sources":["../../../src/components/Stepper/Stepper.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAE,YAAY,EAA2B,MAAM,OAAO,CAAA;AAGjE,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAElC,MAAM,WAAW,mBAAmB;IAClC;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC/B;;OAEG;IACH,WAAW,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IAC/C;;OAEG;IACH,WAAW,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,GAAG,GAAG,IAAI,GAAG,SAAS,CAAC;IACtD;;OAEG;IACH,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB;;OAEG;IACH,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B;;OAEG;IACH,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CAClC;AAED,QAAA,MAAM,cAAc,8CAQlB,CAAA;AAEF,MAAM,WAAW,YAAY;IAC3B,QAAQ,EAAE,YAAY,CAAC,SAAS,CAAC,EAAE,CAAC;CACrC;AAWD;;;;GAIG;AAEH,QAAA,MAAM,OAAO,EAAE,EAAE,CAAC,YAAY,CA2C7B,CAAA;AACD,OAAO,EAAE,cAAc,EAAE,OAAO,EAAE,CAAA"}

package/dist/components/Stepper/Stepper.js

@@ -10,6 +10,7 @@ const StepperContext = createContext({
     getStepData: () => { },
     goToNextStep: () => { },
     goToPreviousStep: () => { },
+    goToStep: () => { },
 });
 const Wrapper = styled(Box) `
   width: 100%;
@@ -48,6 +49,7 @@ const Stepper = ({ children }) => {
         getStepData,
         goToNextStep: setNextStep,
         goToPreviousStep: setPreviousStep,
+        goToStep: setActiveIndex,
     };
     return (_jsx(StepperContext.Provider, { value: contextValue, children: _jsxs(Wrapper, { children: [_jsx(StepperHeaders, { headers }), _jsx(ContentWrapper, { children: children[activeIndex] })] }) }));
 };

package/dist/components/Stepper/Stepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"Stepper.js","sourceRoot":"","sources":["../../../src/components/Stepper/Stepper.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AACxC,OAAO,EAAoB,aAAa,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACjE,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAC1C,OAAO,EAAE,cAAc,EAAE,MAAM,WAAW,CAAA;AA+B1C,MAAM,cAAc,GAAG,aAAa,CAAsB;IACxD,WAAW,EAAE,CAAC;IACd,SAAS,EAAE,EAAE;IACb,WAAW,EAAE,GAAG,EAAE,GAAE,CAAC;IACrB,WAAW,EAAE,GAAG,EAAE,GAAE,CAAC;IACrB,YAAY,EAAE,GAAG,EAAE,GAAE,CAAC;IACtB,gBAAgB,EAAE,GAAG,EAAE,GAAE,CAAC;CAC3B,CAAC,CAAA;AAMF,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;;CAG1B,CAAA;AAED,MAAM,cAAc,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;CAElC,CAAA;AAED;;;;GAIG;AAEH,MAAM,OAAO,GAAqB,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IACjD,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAS,CAAC,CAAC,CAAA;IACzD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAsB,EAAE,CAAC,CAAA;IACnE,MAAM,OAAO,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC,CAAA;IAEvE,MAAM,WAAW,GAAG,CAAC,IAAY,EAAE,IAAS,EAAE,EAAE;QAC9C,YAAY,CAAC,EAAE,GAAG,SAAS,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,EAAE,CAAC,CAAA;IACrD,CAAC,CAAA;IAED,MAAM,WAAW,GAAG,CAAC,IAAY,EAAE,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,CAAA;IAErD,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,IAAI,WAAW,GAAG,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,EAAE,CAAC;YACxC,cAAc,CAAC,WAAW,GAAG,CAAC,CAAC,CAAA;QACjC,CAAC;IACH,CAAC,CAAA;IAED,MAAM,eAAe,GAAG,GAAG,EAAE;QAC3B,IAAI,WAAW,GAAG,CAAC,EAAE,CAAC;YACpB,cAAc,CAAC,WAAW,GAAG,CAAC,CAAC,CAAA;QACjC,CAAC;IACH,CAAC,CAAA;IAED,MAAM,YAAY,GAAwB;QACxC,WAAW;QACX,SAAS;QACT,WAAW;QACX,WAAW;QACX,YAAY,EAAE,WAAW;QACzB,gBAAgB,EAAE,eAAe;KAClC,CAAA;IAED,OAAO,CACL,KAAC,cAAc,CAAC,QAAQ,IAAC,KAAK,EAAE,YAAY,YAC1C,MAAC,OAAO,eACN,KAAC,cAAc,IAAO,OAAO,GAAM,EACnC,KAAC,cAAc,cACZ,QAAQ,CAAC,WAAW,CAAC,GACP,IACT,GACc,CAC3B,CAAA;AACH,CAAC,CAAA;AACD,OAAO,EAAE,cAAc,EAAE,OAAO,EAAE,CAAA"}
+{"version":3,"file":"Stepper.js","sourceRoot":"","sources":["../../../src/components/Stepper/Stepper.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AACxC,OAAO,EAAoB,aAAa,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACjE,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAC1C,OAAO,EAAE,cAAc,EAAE,MAAM,WAAW,CAAA;AAmC1C,MAAM,cAAc,GAAG,aAAa,CAAsB;IACxD,WAAW,EAAE,CAAC;IACd,SAAS,EAAE,EAAE;IACb,WAAW,EAAE,GAAG,EAAE,GAAE,CAAC;IACrB,WAAW,EAAE,GAAG,EAAE,GAAE,CAAC;IACrB,YAAY,EAAE,GAAG,EAAE,GAAE,CAAC;IACtB,gBAAgB,EAAE,GAAG,EAAE,GAAE,CAAC;IAC1B,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC;CACnB,CAAC,CAAA;AAMF,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;;CAG1B,CAAA;AAED,MAAM,cAAc,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;CAElC,CAAA;AAED;;;;GAIG;AAEH,MAAM,OAAO,GAAqB,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IACjD,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAS,CAAC,CAAC,CAAA;IACzD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAsB,EAAE,CAAC,CAAA;IACnE,MAAM,OAAO,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC,CAAA;IAEvE,MAAM,WAAW,GAAG,CAAC,IAAY,EAAE,IAAS,EAAE,EAAE;QAC9C,YAAY,CAAC,EAAE,GAAG,SAAS,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,EAAE,CAAC,CAAA;IACrD,CAAC,CAAA;IAED,MAAM,WAAW,GAAG,CAAC,IAAY,EAAE,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,CAAA;IAErD,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,IAAI,WAAW,GAAG,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,EAAE,CAAC;YACxC,cAAc,CAAC,WAAW,GAAG,CAAC,CAAC,CAAA;QACjC,CAAC;IACH,CAAC,CAAA;IAED,MAAM,eAAe,GAAG,GAAG,EAAE;QAC3B,IAAI,WAAW,GAAG,CAAC,EAAE,CAAC;YACpB,cAAc,CAAC,WAAW,GAAG,CAAC,CAAC,CAAA;QACjC,CAAC;IACH,CAAC,CAAA;IAED,MAAM,YAAY,GAAwB;QACxC,WAAW;QACX,SAAS;QACT,WAAW;QACX,WAAW;QACX,YAAY,EAAE,WAAW;QACzB,gBAAgB,EAAE,eAAe;QACjC,QAAQ,EAAE,cAAc;KACzB,CAAA;IAED,OAAO,CACL,KAAC,cAAc,CAAC,QAAQ,IAAC,KAAK,EAAE,YAAY,YAC1C,MAAC,OAAO,eACN,KAAC,cAAc,IAAO,OAAO,GAAM,EACnC,KAAC,cAAc,cACZ,QAAQ,CAAC,WAAW,CAAC,GACP,IACT,GACc,CAC3B,CAAA;AACH,CAAC,CAAA;AACD,OAAO,EAAE,cAAc,EAAE,OAAO,EAAE,CAAA"}

package/dist/components/form/Form/Form.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+import { FieldValues, UseFormReturn } from 'react-hook-form';
+export interface FormProps {
+    id?: string;
+    name: string;
+    defaultValues?: FieldValues;
+    autoComplete?: HTMLInputElement['autocomplete'];
+    children?: ReactNode;
+    onSubmit?: (params: FieldValues) => unknown;
+    form?: UseFormReturn<any, any>;
+    style?: React.CSSProperties;
+    className?: string;
+}
+export declare const Form: (props: FormProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Form.d.ts.map

package/dist/components/form/Form/Form.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../../../../src/components/form/Form/Form.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,SAAS,EAAE,MAAM,OAAO,CAAA;AAC5C,OAAO,EAAE,WAAW,EAAgB,aAAa,EAA2B,MAAM,iBAAiB,CAAA;AAEnG,MAAM,WAAW,SAAS;IACxB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,aAAa,CAAC,EAAE,WAAW,CAAC;IAC5B,YAAY,CAAC,EAAE,gBAAgB,CAAC,cAAc,CAAC,CAAC;IAChD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,OAAO,CAAC;IAC5C,IAAI,CAAC,EAAE,aAAa,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;IAC/B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA4ED,eAAO,MAAM,IAAI,GAAI,OAAO,SAAS,4CASpC,CAAA"}

package/dist/components/form/Form/Form.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { get } from 'lodash';
+import { FormProvider, useForm, useFormContext } from 'react-hook-form';
+function handleGraphqlErrors(error, methods) {
+    const errors = get(error, 'cause.extensions.fields');
+    if (errors) {
+        Object.keys(errors).forEach((key) => {
+            if (Object.keys(methods.control._fields).includes(key)) {
+                methods.setError(key, { type: 'server', message: errors[`${key}`] });
+            }
+        });
+    }
+}
+const handleFormSubmit = async (data, methods, onSubmit) => {
+    if (!onSubmit) {
+        return;
+    }
+    const result = methods.handleSubmit(onSubmit)(data);
+    const isPromise = result instanceof Promise;
+    if (!isPromise) {
+        return result;
+    }
+    try {
+        return await result;
+    }
+    catch (error) {
+        const isGraphqlError = error.message === 'GraphqlError';
+        if (!isGraphqlError) {
+            throw error;
+        }
+        handleGraphqlErrors(error, methods);
+    }
+};
+const BasicForm = ({ onSubmit, id, name, children, methods, autoComplete, ...props }) => (_jsx("form", { id: id, autoComplete: autoComplete, name: name, onSubmit: (data) => handleFormSubmit(data, methods, onSubmit), noValidate: true, style: props.style, className: props.className, children: children }));
+const FormWithProvider = (props) => {
+    const methods = useForm({ defaultValues: props.defaultValues });
+    const form = props.form || methods;
+    return (_jsx(FormProvider, { ...form, children: _jsx(BasicForm, { ...props, methods: form }) }));
+};
+export const Form = (props) => {
+    const useFormMethods = useFormContext();
+    const hasFormProvider = !!useFormMethods;
+    if (hasFormProvider) {
+        return _jsx(BasicForm, { ...props, methods: useFormMethods });
+    }
+    return _jsx(FormWithProvider, { ...props });
+};
+//# sourceMappingURL=Form.js.map

package/dist/components/form/Form/Form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Form.js","sourceRoot":"","sources":["../../../../src/components/form/Form/Form.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAE5B,OAAO,EAAe,YAAY,EAAiB,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AAenG,SAAS,mBAAmB,CAAC,KAAc,EAAE,OAAmC;IAC9E,MAAM,MAAM,GAAQ,GAAG,CAAC,KAAK,EAAE,yBAAyB,CAAC,CAAA;IAEzD,IAAI,MAAM,EAAE,CAAC;QACX,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;YAClC,IAAI,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;gBACvD,OAAO,CAAC,QAAQ,CAAC,GAAG,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,CAAC,GAAG,GAAG,EAAE,CAAC,EAAE,CAAC,CAAA;YACtE,CAAC;QACH,CAAC,CAAC,CAAA;IACJ,CAAC;AACH,CAAC;AAED,MAAM,gBAAgB,GAAG,KAAK,EAC5B,IAAgC,EAChC,OAAsB,EACtB,QAAsE,EACtE,EAAE;IAEF,IAAI,CAAC,QAAQ,EAAE,CAAC;QACd,OAAM;IACR,CAAC;IAED,MAAM,MAAM,GAAG,OAAO,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAA;IACnD,MAAM,SAAS,GAAG,MAAM,YAAY,OAAO,CAAA;IAE3C,IAAI,CAAC,SAAS,EAAE,CAAC;QACf,OAAO,MAAM,CAAA;IACf,CAAC;IAED,IAAI,CAAC;QACH,OAAO,MAAM,MAAM,CAAA;IACrB,CAAC;IAAC,OAAO,KAAU,EAAE,CAAC;QACpB,MAAM,cAAc,GAAG,KAAK,CAAC,OAAO,KAAK,cAAc,CAAA;QACvD,IAAI,CAAC,cAAc,EAAE,CAAC;YACpB,MAAM,KAAK,CAAA;QACb,CAAC;QACD,mBAAmB,CAAC,KAAK,EAAE,OAAO,CAAC,CAAA;IACrC,CAAC;AACH,CAAC,CAAA;AAED,MAAM,SAAS,GAAG,CAAC,EACjB,QAAQ,EACR,EAAE,EACF,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,YAAY,EACZ,GAAG,KAAK,EAC4C,EAAE,EAAE,CAAC,CACzD,eACE,EAAE,EAAE,EAAE,EACN,YAAY,EAAE,YAAY,EAC1B,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,CAAC,IAAgC,EAAE,EAAE,CAAC,gBAAgB,CAAC,IAAI,EAAE,OAAO,EAAE,QAAQ,CAAC,EACzF,UAAU,QACV,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,SAAS,EAAE,KAAK,CAAC,SAAS,YAEzB,QAAQ,GACJ,CACR,CAAA;AAED,MAAM,gBAAgB,GAAG,CAAC,KAAgB,EAAE,EAAE;IAC5C,MAAM,OAAO,GAAG,OAAO,CAAC,EAAE,aAAa,EAAE,KAAK,CAAC,aAAa,EAAE,CAAC,CAAA;IAC/D,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,IAAI,OAAO,CAAA;IAElC,OAAO,CACL,KAAC,YAAY,OAAK,IAAI,YACpB,KAAC,SAAS,OAAK,KAAK,EAAE,OAAO,EAAE,IAAI,GAAI,GAC1B,CAChB,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,KAAgB,EAAE,EAAE;IACvC,MAAM,cAAc,GAAG,cAAc,EAAE,CAAA;IACvC,MAAM,eAAe,GAAG,CAAC,CAAC,cAAc,CAAA;IAExC,IAAI,eAAe,EAAE,CAAC;QACpB,OAAO,KAAC,SAAS,OAAK,KAAK,EAAE,OAAO,EAAE,cAAc,GAAI,CAAA;IAC1D,CAAC;IAED,OAAO,KAAC,gBAAgB,OAAK,KAAK,GAAI,CAAA;AACxC,CAAC,CAAA"}

package/dist/components/form/Form/FormGroup.d.ts

@@ -0,0 +1,37 @@
+import { SxProperties } from '@citric/core/dist/sx.js';
+import { Tooltip } from '@citric/ui';
+import { ChangeEvent, ComponentProps, ComponentPropsWithoutRef, ElementType, ReactElement, ReactNode } from 'react';
+import { RegisterOptions } from 'react-hook-form';
+interface FormGroupProps<T extends ElementType> {
+    fieldAddonAfter?: ReactNode;
+    fieldAddonBefore?: ReactNode;
+    formHelper?: ReactNode;
+    name: string;
+    id?: string;
+    component?: T;
+    label?: string | ReactElement;
+    registerOptions?: RegisterOptions;
+    formItemSx?: SxProperties;
+    formGroupSx?: SxProperties;
+    componentSx?: SxProperties;
+    fieldAddonBeforeSx?: SxProperties;
+    fieldAddonAfterSx?: SxProperties;
+    $formName?: string;
+    required?: boolean;
+    onChange?: (event: ChangeEvent<HTMLInputElement> | ChangeEvent<HTMLSelectElement>) => void;
+    tooltipProps?: Omit<ComponentProps<typeof Tooltip>, 'children'>;
+    readOnly?: boolean;
+    disabled?: boolean;
+    standalone?: boolean;
+    delay?: number;
+    hideRequiredSymbol?: boolean;
+    shouldUnregister?: boolean;
+}
+type Props<T extends ElementType> = FormGroupProps<T> & Omit<ComponentPropsWithoutRef<T>, keyof FormGroupProps<T>>;
+export declare const FormGroup: <T extends ElementType>({ fieldAddonAfter, fieldAddonBefore, formHelper, id, name, component, label, registerOptions, formGroupSx, formItemSx, componentSx, disabled, readOnly, onChange, tooltipProps, required, colorScheme: propColorScheme, fieldAddonBeforeSx, fieldAddonAfterSx, standalone, delay, hideRequiredSymbol, shouldUnregister, ...props }: Props<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const FormItemError: ({ name, id }: {
+    name: string;
+    id: string;
+}) => import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=FormGroup.d.ts.map

package/dist/components/form/Form/FormGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormGroup.d.ts","sourceRoot":"","sources":["../../../../src/components/form/Form/FormGroup.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAA;AAEnD,OAAO,EAAgD,OAAO,EAAE,MAAM,YAAY,CAAA;AAGlF,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,wBAAwB,EAAE,WAAW,EAAE,YAAY,EAAE,SAAS,EAAa,MAAM,OAAO,CAAA;AAC9H,OAAO,EAA0B,eAAe,EAA0E,MAAM,iBAAiB,CAAA;AA2BjJ,UAAU,cAAc,CAAC,CAAC,SAAS,WAAW;IAC5C,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,CAAC,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,GAAG,YAAY,CAAC;IAC9B,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B,WAAW,CAAC,EAAE,YAAY,CAAC;IAC3B,WAAW,CAAC,EAAE,YAAY,CAAC;IAC3B,kBAAkB,CAAC,EAAE,YAAY,CAAC;IAClC,iBAAiB,CAAC,EAAE,YAAY,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,gBAAgB,CAAC,GAAG,WAAW,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC3F,YAAY,CAAC,EAAE,IAAI,CAAC,cAAc,CAAC,OAAO,OAAO,CAAC,EAAE,UAAU,CAAC,CAAC;IAChE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,KAAK,KAAK,CAAC,CAAC,SAAS,WAAW,IAAI,cAAc,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,MAAM,cAAc,CAAC,CAAC,CAAC,CAAC,CAAA;AAElH,eAAO,MAAM,SAAS,GAAI,CAAC,SAAS,WAAW,EAAE,oUAyB9C,KAAK,CAAC,CAAC,CAAC,4CA8FV,CAAA;AAED,eAAO,MAAM,aAAa,GAAI,cAAc;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAA;CAAE,mDAoBvE,CAAA"}

package/dist/components/form/Form/FormGroup.js

@@ -0,0 +1,72 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Box, Flex, IconBox, Input, Label } from '@citric/core';
+import { InfoCircle, TimesCircle } from '@citric/icons';
+import { FieldAddon, FieldGroup, FormHelper, FormItem, Tooltip } from '@citric/ui';
+import { useTranslate } from '@stack-spot/portal-translate';
+import { debounce, get } from 'lodash';
+import { useEffect } from 'react';
+import { useFormContext } from 'react-hook-form';
+const registerFieldWithDebounceChangeValidation = (name, delay, trigger, register, options) => {
+    const useFormRegisterReturn = register(name, options);
+    const { onChange } = useFormRegisterReturn;
+    const debouncedValidate = debounce(() => {
+        trigger(name);
+    }, delay);
+    const debouncedChange = debounce((event) => {
+        onChange?.(event);
+    }, delay);
+    return {
+        ...useFormRegisterReturn,
+        onChange: (e) => {
+            debouncedChange(e);
+            debouncedValidate();
+        },
+    };
+};
+export const FormGroup = ({ fieldAddonAfter, fieldAddonBefore, formHelper, id, name, component, label, registerOptions = {}, formGroupSx = {}, formItemSx = {}, componentSx = {}, disabled, readOnly, onChange, tooltipProps, required, colorScheme: propColorScheme, fieldAddonBeforeSx, fieldAddonAfterSx, standalone, delay, hideRequiredSymbol, shouldUnregister = false, ...props }) => {
+    const t = useTranslate(dictionary);
+    const { register, getFieldState, trigger, unregister } = useFormContext();
+    const Component = component || Input;
+    const colorScheme = propColorScheme;
+    let formRegistry = {};
+    if (!standalone) {
+        const options = {
+            onChange,
+            required: { message: hideRequiredSymbol ? t.requiredTest : t.required, value: !!required }, validate: (value) => {
+                if (required && typeof value === 'string') {
+                    return !!value?.trim();
+                }
+            },
+            ...registerOptions,
+        };
+        formRegistry = delay ? registerFieldWithDebounceChangeValidation(name, delay, trigger, register, options) : register(name, options);
+    }
+    useEffect(() => () => {
+        shouldUnregister && unregister(name);
+    }, [name, unregister]);
+    return (_jsxs(FormItem, { sx: formItemSx, children: [label && (_jsxs(Flex, { children: [_jsxs(Label, { appearance: "body2", htmlFor: id || name, sx: { pointerEvents: disabled || readOnly ? 'none' : undefined }, children: [label, "\u00A0", required && !hideRequiredSymbol && '*'] }), tooltipProps?.text && (_jsx(Tooltip, { ...tooltipProps, children: _jsx(IconBox, { children: _jsx(InfoCircle, {}) }) }))] })), !fieldAddonBefore && !fieldAddonAfter ? (_jsx(Component, { id: id || name, disabled: disabled, readOnly: readOnly, ...props, colorScheme, ...formRegistry, required: required, sx: componentSx, "aria-errormessage": `err${(id || name)}`, "aria-invalid": getFieldState(name).invalid })) : (_jsxs(FieldGroup, { sx: formGroupSx, children: [fieldAddonBefore && (_jsx(FieldAddon, { sx: { borderColor: colorScheme ? colorScheme : 'light.600', ...fieldAddonBeforeSx }, children: fieldAddonBefore })), _jsx(Component, { disabled: disabled, readOnly: readOnly, id: id || name, ...props, colorScheme, ...formRegistry, required: required, sx: componentSx, "aria-errormessage": `err${(id || name)}`, "aria-invalid": getFieldState(name).invalid }), fieldAddonAfter && (_jsx(FieldAddon, { sx: { borderColor: colorScheme ? colorScheme : 'light.600', ...fieldAddonAfterSx }, children: fieldAddonAfter }))] })), _jsx(FormItemError, { name: name, id: id || name }), formHelper && (_jsx(Box, { mt: "2", children: _jsx(FormHelper, { children: formHelper }) }))] }));
+};
+export const FormItemError = ({ name, id }) => {
+    const t = useTranslate(dictionary);
+    const { formState } = useFormContext();
+    const formItemError = get(formState.errors, name);
+    if (formItemError) {
+        return (_jsxs(Flex, { alignItems: "center", flexWrap: "nowrap", children: [_jsx(IconBox, { size: "xs", appearance: "circle", colorIcon: "danger", colorBg: "danger.500", children: _jsx(TimesCircle, {}) }), _jsx(Box, { ml: "3", children: _jsx(FormHelper, { colorScheme: "danger", "aria-live": "assertive", id: `err${id}`, children: formItemError.message?.toString() || formItemError?.root?.message?.toString() || t.invalidGenericError }) })] }));
+    }
+    return null;
+};
+const dictionary = {
+    en: {
+        invalidGenericError: 'Invalid field',
+        required: 'Required field',
+        // text for tests of usability
+        requiredTest: 'Fill in the required field to continue.',
+    },
+    pt: {
+        invalidGenericError: 'Campo inválido',
+        required: 'Campo obrigatório',
+        // text for tests of usability
+        requiredTest: 'Preencha este campo obrigatório para continuar.',
+    },
+};
+//# sourceMappingURL=FormGroup.js.map

package/dist/components/form/Form/FormGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormGroup.js","sourceRoot":"","sources":["../../../../src/components/form/Form/FormGroup.tsx"],"names":[],"mappings":"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"}

package/dist/components/form/Form/index.d.ts

@@ -0,0 +1,3 @@
+export { FormGroup } from './FormGroup.js';
+export { Form } from './Form.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/form/Form/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/form/Form/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA"}

package/dist/components/form/Form/index.js

@@ -0,0 +1,3 @@
+export { FormGroup } from './FormGroup.js';
+export { Form } from './Form.js';
+//# sourceMappingURL=index.js.map

package/dist/components/form/Form/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/form/Form/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stack-spot/portal-components",
-  "version": "2.21.2",
+  "version": "2.22.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -26,7 +26,8 @@
     "./FileTreeView": "./dist/components/FileTreeView/index.js",
     "./FadingOverflow": "./dist/components/FadingOverflow.js",
     "./Table": "./dist/components/Table/index.js",
-    "./ContentValidateFilter": "./dist/components/ContentValidateFilter.js"
+    "./ContentValidateFilter": "./dist/components/ContentValidateFilter.js",
+    "./Form": "./dist/components/form/Form/index.js"
   },
   "scripts": {
     "build": "rimraf dist && tsc && tsc-esm-fix --target='dist'",
@@ -68,6 +69,7 @@
   "dependencies": {
     "date-fns": "^3.6.0",
     "lodash": "^4.17.21",
+    "react-hook-form": "^7.55.0",
     "react-infinite-scroll-component": "^6.1.0",
     "react-markdown": "^9.0.1",
     "react-select": "^5.10.0",

package/src/components/Stepper/Stepper.tsx

@@ -30,6 +30,10 @@ export interface StepperContextProps {
    * Navigate to the previous step.
    */
   goToPreviousStep: () => void,
+  /**
+   * Navigate to the provided step.
+   */
+  goToStep: (step: number) => void,
 }
 
 const StepperContext = createContext<StepperContextProps>({ 
@@ -39,6 +43,7 @@ const StepperContext = createContext<StepperContextProps>({
   getStepData: () => {},
   goToNextStep: () => {},
   goToPreviousStep: () => {},
+  goToStep: () => {},
 })
 
 export interface StepperProps {
@@ -90,6 +95,7 @@ const Stepper: FC<StepperProps> = ({ children }) => {
     getStepData,
     goToNextStep: setNextStep,
     goToPreviousStep: setPreviousStep,
+    goToStep: setActiveIndex,
   }
 
   return (

package/src/components/form/Form/Form.tsx

@@ -0,0 +1,101 @@
+import { get } from 'lodash'
+import { FormEvent, ReactNode } from 'react'
+import { FieldValues, FormProvider, UseFormReturn, useForm, useFormContext } from 'react-hook-form'
+
+export interface FormProps {
+  id?: string,
+  name: string,
+  defaultValues?: FieldValues,
+  autoComplete?: HTMLInputElement['autocomplete'],
+  children?: ReactNode,
+  onSubmit?: (params: FieldValues) => unknown,
+  form?: UseFormReturn<any, any>,
+  style?: React.CSSProperties,
+  className?: string,
+}
+
+
+function handleGraphqlErrors(error: unknown, methods: UseFormReturn<FieldValues>) {
+  const errors: any = get(error, 'cause.extensions.fields')
+
+  if (errors) {
+    Object.keys(errors).forEach((key) => {
+      if (Object.keys(methods.control._fields).includes(key)) {
+        methods.setError(key, { type: 'server', message: errors[`${key}`] })
+      }
+    })
+  }
+}
+
+const handleFormSubmit = async (
+  data: FormEvent<HTMLFormElement>,
+  methods: UseFormReturn,
+  onSubmit?: (params: Record<string, any>) => Promise<unknown> | unknown,
+) => {
+
+  if (!onSubmit) {
+    return
+  }
+
+  const result = methods.handleSubmit(onSubmit)(data)
+  const isPromise = result instanceof Promise
+
+  if (!isPromise) {
+    return result
+  }
+
+  try {
+    return await result
+  } catch (error: any) {
+    const isGraphqlError = error.message === 'GraphqlError'
+    if (!isGraphqlError) {
+      throw error
+    }
+    handleGraphqlErrors(error, methods)
+  }
+}
+
+const BasicForm = ({
+  onSubmit,
+  id,
+  name,
+  children,
+  methods,
+  autoComplete,
+  ...props
+}: FormProps & { methods: UseFormReturn<FieldValues> }) => (
+  <form
+    id={id}
+    autoComplete={autoComplete}
+    name={name}
+    onSubmit={(data: FormEvent<HTMLFormElement>) => handleFormSubmit(data, methods, onSubmit)}
+    noValidate
+    style={props.style}
+    className={props.className}
+  >
+    {children}
+  </form>
+)
+
+const FormWithProvider = (props: FormProps) => {
+  const methods = useForm({ defaultValues: props.defaultValues })
+  const form = props.form || methods
+
+  return (
+    <FormProvider {...form}>
+      <BasicForm {...props} methods={form} />
+    </FormProvider>
+  )
+}
+
+export const Form = (props: FormProps) => {
+  const useFormMethods = useFormContext()
+  const hasFormProvider = !!useFormMethods
+
+  if (hasFormProvider) {
+    return <BasicForm {...props} methods={useFormMethods} />
+  }
+
+  return <FormWithProvider {...props} />
+}
+

package/src/components/form/Form/FormGroup.tsx

@@ -0,0 +1,221 @@
+import { Box, Flex, IconBox, Input, Label } from '@citric/core'
+import { SxProperties } from '@citric/core/dist/sx'
+import { InfoCircle, TimesCircle } from '@citric/icons'
+import { FieldAddon, FieldGroup, FormHelper, FormItem, Tooltip } from '@citric/ui'
+import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
+import { debounce, get } from 'lodash'
+import { ChangeEvent, ComponentProps, ComponentPropsWithoutRef, ElementType, ReactElement, ReactNode, useEffect } from 'react'
+import { FieldPath, FieldValues, RegisterOptions, useFormContext, UseFormRegister, UseFormRegisterReturn, UseFormTrigger } from 'react-hook-form'
+
+const registerFieldWithDebounceChangeValidation = <T extends FieldValues>(
+  name: FieldPath<T>,
+  delay: number,
+  trigger: UseFormTrigger<T>,
+  register: UseFormRegister<T>,
+  options?: RegisterOptions<T, FieldPath<T>>,
+) => {
+  const useFormRegisterReturn: UseFormRegisterReturn = register(name, options)
+  const { onChange } = useFormRegisterReturn
+  const debouncedValidate = debounce(() => {
+    trigger(name)
+  }, delay)
+
+  const debouncedChange = debounce((event: ChangeEvent<HTMLInputElement> | ChangeEvent<HTMLSelectElement>) => {
+    onChange?.(event)
+  }, delay)
+  return {
+    ...useFormRegisterReturn,
+    onChange: (e: any) => {
+      debouncedChange(e)
+      debouncedValidate()
+    },
+  }
+}
+
+interface FormGroupProps<T extends ElementType> {
+  fieldAddonAfter?: ReactNode,
+  fieldAddonBefore?: ReactNode,
+  formHelper?: ReactNode,
+  name: string,
+  id?: string,
+  component?: T,
+  label?: string | ReactElement,
+  registerOptions?: RegisterOptions,
+  formItemSx?: SxProperties,
+  formGroupSx?: SxProperties,
+  componentSx?: SxProperties,
+  fieldAddonBeforeSx?: SxProperties,
+  fieldAddonAfterSx?: SxProperties,
+  $formName?: string,
+  required?: boolean,
+  onChange?: (event: ChangeEvent<HTMLInputElement> | ChangeEvent<HTMLSelectElement>) => void,
+  tooltipProps?: Omit<ComponentProps<typeof Tooltip>, 'children'>,
+  readOnly?: boolean,
+  disabled?: boolean,
+  // When true, input will not be registered on form
+  standalone?: boolean,
+  delay?: number,
+  // prop for tests of usability
+  hideRequiredSymbol?: boolean,
+  shouldUnregister?: boolean,
+}
+
+type Props<T extends ElementType> = FormGroupProps<T> & Omit<ComponentPropsWithoutRef<T>, keyof FormGroupProps<T>>
+
+export const FormGroup = <T extends ElementType>({
+  fieldAddonAfter,
+  fieldAddonBefore,
+  formHelper,
+  id,
+  name,
+  component,
+  label,
+  registerOptions = {},
+  formGroupSx = {},
+  formItemSx = {},
+  componentSx = {},
+  disabled,
+  readOnly,
+  onChange,
+  tooltipProps,
+  required,
+  colorScheme: propColorScheme,
+  fieldAddonBeforeSx,
+  fieldAddonAfterSx,
+  standalone,
+  delay,
+  hideRequiredSymbol,
+  shouldUnregister = false,
+  ...props
+}: Props<T>) => {
+  const t = useTranslate(dictionary)
+  const { register, getFieldState, trigger, unregister } = useFormContext()
+  const Component = component || Input
+  const colorScheme = propColorScheme
+
+  let formRegistry = {}
+
+  if (!standalone) {
+    const options = {
+      onChange,
+      required: { message: hideRequiredSymbol ? t.requiredTest : t.required, value: !!required }, validate: (value: string) => {
+        if (required && typeof value === 'string') {
+          return !!value?.trim()
+        }
+      },
+      ...registerOptions,
+    }
+
+    formRegistry = delay ? registerFieldWithDebounceChangeValidation(name, delay, trigger, register, options) : register(name, options)
+  }
+
+  useEffect(() => () => {
+    shouldUnregister && unregister(name)
+  }, [name, unregister])
+
+  return (
+    <FormItem sx={formItemSx}>
+      {label && (
+        <Flex>
+          <Label appearance="body2" htmlFor={id || name} sx={{ pointerEvents: disabled || readOnly ? 'none' : undefined }}>
+            {label}
+            &nbsp;
+            {required && !hideRequiredSymbol && '*'}
+          </Label>
+          {tooltipProps?.text && (
+            <Tooltip {...(tooltipProps as typeof tooltipProps & { text: string })}>
+              <IconBox>
+                <InfoCircle />
+              </IconBox>
+            </Tooltip>
+          )}
+        </Flex>
+      )}
+
+      {!fieldAddonBefore && !fieldAddonAfter ? (
+        <Component
+          id={id || name}
+          disabled={disabled}
+          readOnly={readOnly}
+          {...props}
+          {...{ colorScheme }}
+          {...formRegistry}
+          required={required}
+          sx={componentSx}
+          aria-errormessage={`err${(id || name)}`}
+          aria-invalid={getFieldState(name).invalid}
+        />
+      ) : (
+        <FieldGroup sx={formGroupSx}>
+          {fieldAddonBefore && (
+            <FieldAddon sx={{ borderColor: colorScheme ? colorScheme : 'light.600', ...fieldAddonBeforeSx }}>
+              {fieldAddonBefore}
+            </FieldAddon>
+          )}
+
+          <Component
+            disabled={disabled}
+            readOnly={readOnly}
+            id={id || name}
+            {...props}
+            {...{ colorScheme }}
+            {...formRegistry}
+            required={required}
+            sx={componentSx}
+            aria-errormessage={`err${(id || name)}`}
+            aria-invalid={getFieldState(name).invalid}
+          />
+
+          {fieldAddonAfter && (
+            <FieldAddon sx={{ borderColor: colorScheme ? colorScheme : 'light.600', ...fieldAddonAfterSx }}>
+              {fieldAddonAfter}
+            </FieldAddon>
+          )}
+        </FieldGroup>
+      )}
+      <FormItemError name={name} id={id || name} />
+      {formHelper && (
+        <Box mt="2">
+          <FormHelper>{formHelper}</FormHelper>
+        </Box>
+      )}
+    </FormItem>
+  )
+}
+
+export const FormItemError = ({ name, id }: { name: string, id: string }) => {
+  const t = useTranslate(dictionary)
+  const { formState } = useFormContext()
+  const formItemError = get(formState.errors, name)
+
+  if (formItemError) {
+    return (
+      <Flex alignItems="center" flexWrap="nowrap">
+        <IconBox size="xs" appearance="circle" colorIcon="danger" colorBg="danger.500">
+          <TimesCircle />
+        </IconBox>
+        <Box ml="3">
+          <FormHelper colorScheme="danger" aria-live="assertive" id={`err${id}`}>
+            {formItemError.message?.toString() || formItemError?.root?.message?.toString() || t.invalidGenericError}
+          </FormHelper>
+        </Box>
+      </Flex>
+    )
+  }
+  return null
+}
+
+const dictionary = {
+  en: {
+    invalidGenericError: 'Invalid field',
+    required: 'Required field',
+    // text for tests of usability
+    requiredTest: 'Fill in the required field to continue.',
+  },
+  pt: {
+    invalidGenericError: 'Campo inválido',
+    required: 'Campo obrigatório',
+    // text for tests of usability
+    requiredTest: 'Preencha este campo obrigatório para continuar.',
+  },
+} satisfies Dictionary

package/src/components/form/Form/index.ts

@@ -0,0 +1,2 @@
+export { FormGroup } from './FormGroup'
+export { Form } from './Form'