@aragon/gov-ui-kit 1.0.57 → 1.0.58

package/dist/types/src/core/components/dialogs/dialog/dialogFooter/dialogFooter.d.ts

@@ -1,7 +1,7 @@
 import { type AnchorHTMLAttributes, type ButtonHTMLAttributes, type ComponentPropsWithoutRef } from 'react';
 import { type IAlertInlineProps } from '../../../alerts';
 import { type IButtonBaseProps } from '../../../button';
-export type IDialogFooterAction = (Pick<AnchorHTMLAttributes<HTMLAnchorElement>, 'href'> | Pick<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'>) & Pick<IButtonBaseProps, 'iconRight' | 'iconLeft' | 'disabled' | 'isLoading'> & {
+export type IDialogFooterAction = (Pick<AnchorHTMLAttributes<HTMLAnchorElement>, 'href'> | Pick<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'type'>) & Pick<IButtonBaseProps, 'iconRight' | 'iconLeft' | 'disabled' | 'isLoading'> & {
     /**
      * Button label
      */

package/dist/types/src/modules/assets/copy/modulesCopy.d.ts

@@ -47,15 +47,16 @@ export declare const modulesCopy: {
             RAW: string;
         };
     };
-    proposalActionsItemDecodedView: {
-        valueHelper: string;
-        valueLabel: string;
-    };
-    proposalActionsItemRawView: {
-        to: string;
-        data: string;
-        value: string;
-        copyButton: string;
+    proposalActionsDecoder: {
+        copyData: string;
+        add: string;
+        validation: {
+            required: (label: string) => string;
+            boolean: (label: string) => string;
+            address: (label: string) => string;
+            bytes: (label: string) => string;
+            unsignedNumber: (label: string) => string;
+        };
     };
     proposalActionChangeMembers: {
         summary: string;

package/dist/types/src/modules/components/proposal/proposalActions/proposalActionsDecoder/index.d.ts

@@ -0,0 +1,2 @@
+export { ProposalActionsDecoder } from './proposalActionsDecoder';
+export { ProposalActionsDecoderMode, ProposalActionsDecoderView, type IProposalActionsDecoderProps, } from './proposalActionsDecoder.api';

package/dist/types/src/modules/components/proposal/proposalActions/proposalActionsDecoder/proposalActionsDecoder.api.d.ts

@@ -0,0 +1,36 @@
+import { type ComponentProps } from 'react';
+import type { IProposalAction } from '../proposalActionsDefinitions';
+export declare enum ProposalActionsDecoderView {
+    DECODED = "DECODED",
+    RAW = "RAW"
+}
+export declare enum ProposalActionsDecoderMode {
+    READ = "READ",
+    EDIT = "EDIT",
+    WATCH = "WATCH"
+}
+export interface IProposalActionsDecoderProps extends ComponentProps<'div'> {
+    /**
+     * Action to display the values for.
+     */
+    action: IProposalAction;
+    /**
+     * Prefix to be prepended to all the action values on edit mode.
+     */
+    formPrefix?: string;
+    /**
+     * Defines the behaviour of the decoder:
+     * - READ: Displays the values as disabled using the values on the action property;
+     * - EDIT: Displays the values as editable and updates the values on the form context;
+     * - WATCH: Displays the values as disabled but each value listens to the changes on the form context;
+     * @default READ
+     */
+    mode?: ProposalActionsDecoderMode;
+    /**
+     * Defines the action values to be displayed:
+     * - DECODED: Displays the parameters of the action and the value field if the function is payable;
+     * - RAW: Only displays the base values of the action (value and data);
+     * @default RAW
+     */
+    view?: ProposalActionsDecoderView;
+}

package/dist/types/src/modules/components/proposal/proposalActions/proposalActionsDecoder/proposalActionsDecoder.d.ts

@@ -0,0 +1,2 @@
+import { type IProposalActionsDecoderProps } from './proposalActionsDecoder.api';
+export declare const ProposalActionsDecoder: React.FC<IProposalActionsDecoderProps>;

package/dist/types/src/modules/components/proposal/proposalActions/proposalActionsDecoder/proposalActionsDecoderField/index.d.ts

@@ -0,0 +1 @@
+export { ProposalActionsDecoderField, type IProposalActionsDecoderFieldProps } from './proposalActionsDecoderField';

package/dist/types/src/modules/components/proposal/proposalActions/proposalActionsDecoder/proposalActionsDecoderField/proposalActionsDecoderField.d.ts

@@ -0,0 +1,21 @@
+import type { IProposalActionInputDataParameter } from '../../proposalActionsDefinitions';
+import { type IProposalActionsDecoderProps } from '../proposalActionsDecoder.api';
+export interface IProposalActionsDecoderFieldProps extends Pick<IProposalActionsDecoderProps, 'mode' | 'formPrefix'> {
+    /**
+     * Parameter to be rendered.
+     */
+    parameter: IProposalActionInputDataParameter;
+    /**
+     * Name of the form field.
+     */
+    fieldName: string;
+    /**
+     * Hides the sub-component labels when set to true.
+     */
+    hideLabels?: boolean;
+    /**
+     * Displays a delete button triggering this callback when set, to be used for array types.
+     */
+    onDeleteClick?: () => void;
+}
+export declare const ProposalActionsDecoderField: React.FC<IProposalActionsDecoderFieldProps>;

package/dist/types/src/modules/components/proposal/proposalActions/proposalActionsDecoder/proposalActionsDecoderTextField/index.d.ts

@@ -0,0 +1,2 @@
+export { ProposalActionsDecoderTextField } from './proposalActionsDecoderTextField';
+export type { IProposalActionsDecoderTextFieldBaseProps, IProposalActionsDecoderTextFieldComponentProps, IProposalActionsDecoderTextFieldProps, } from './proposalActionsDecoderTextField.api';

package/dist/types/src/modules/components/proposal/proposalActions/proposalActionsDecoder/proposalActionsDecoderTextField/proposalActionsDecoderTextField.api.d.ts

@@ -0,0 +1,30 @@
+import type { IInputContainerProps } from '../../../../../../core';
+import type { IProposalActionInputDataParameter } from '../../proposalActionsDefinitions';
+import type { IProposalActionsDecoderProps } from '../proposalActionsDecoder.api';
+export interface IProposalActionsDecoderTextFieldBaseProps {
+    /**
+     * Action parameter to be rendered.
+     */
+    parameter: IProposalActionInputDataParameter;
+    /**
+     * Name of the input field.
+     */
+    fieldName: string;
+    /**
+     * Component to be used.
+     * @default input
+     */
+    component?: 'textarea' | 'input';
+    /**
+     * Classname for the input component.
+     */
+    className?: string;
+}
+export interface IProposalActionsDecoderTextFieldProps extends IProposalActionsDecoderTextFieldBaseProps, Pick<IProposalActionsDecoderProps, 'mode' | 'formPrefix'> {
+    /**
+     * Hides the default labels when set to true.
+     */
+    hideLabels?: boolean;
+}
+export interface IProposalActionsDecoderTextFieldComponentProps extends IProposalActionsDecoderTextFieldBaseProps, Pick<IInputContainerProps, 'label' | 'helpText'> {
+}

package/dist/types/src/modules/components/proposal/proposalActions/proposalActionsDecoder/proposalActionsDecoderTextField/proposalActionsDecoderTextField.d.ts

@@ -0,0 +1,2 @@
+import type { IProposalActionsDecoderTextFieldProps } from './proposalActionsDecoderTextField.api';
+export declare const ProposalActionsDecoderTextField: React.FC<IProposalActionsDecoderTextFieldProps>;

package/dist/types/src/modules/components/proposal/proposalActions/proposalActionsDecoder/proposalActionsDecoderTextField/proposalActionsDecoderTextFieldEdit.d.ts

@@ -0,0 +1,4 @@
+import type { IProposalActionsDecoderTextFieldComponentProps } from './proposalActionsDecoderTextField.api';
+export interface IProposalActionsDecoderTextFieldEditProps extends IProposalActionsDecoderTextFieldComponentProps {
+}
+export declare const ProposalActionsDecoderTextFieldEdit: React.FC<IProposalActionsDecoderTextFieldEditProps>;

package/dist/types/src/modules/components/proposal/proposalActions/proposalActionsDecoder/proposalActionsDecoderTextField/proposalActionsDecoderTextFieldWatch.d.ts

@@ -0,0 +1,4 @@
+import type { IProposalActionsDecoderTextFieldComponentProps } from './proposalActionsDecoderTextField.api';
+export interface IProposalActionsDecoderTextFieldWatchProps extends IProposalActionsDecoderTextFieldComponentProps {
+}
+export declare const ProposalActionsDecoderTextFieldWatch: React.FC<IProposalActionsDecoderTextFieldWatchProps>;

package/dist/types/src/modules/components/proposal/proposalActions/proposalActionsDecoder/proposalActionsDecoderUtils.d.ts

@@ -0,0 +1,45 @@
+import type { DeepPartial } from 'react-hook-form';
+import type { ModulesCopy } from '../../../../assets';
+import type { IProposalAction, IProposalActionInputDataParameter } from '../proposalActionsDefinitions';
+export interface IGetValidationRulesParams {
+    /**
+     * Label of the field used for validation errors.
+     */
+    label: string;
+    /**
+     * Type of the field to build the validation rules.
+     */
+    type: string;
+    /**
+     * Strings to use for validation errors.
+     */
+    errorMessages: ModulesCopy['proposalActionsDecoder']['validation'];
+    /**
+     * Defines if the field is required or not.
+     */
+    required?: boolean;
+}
+export type ProposalActionsFieldValue = string | boolean | undefined | null | unknown[];
+export type NestedProposalActionFormValues = DeepPartial<IProposalAction> | Record<string, unknown>;
+declare class ProposalActionsDecoderUtils {
+    private bytesRegex;
+    private unsignedNumberRegex;
+    getFieldName: (name: string, prefix?: string) => string;
+    validateValue: (value: ProposalActionsFieldValue, params: IGetValidationRulesParams) => string | true | undefined;
+    validateRequired: (value?: ProposalActionsFieldValue) => boolean;
+    validateBoolean: (value?: ProposalActionsFieldValue) => boolean;
+    validateBytes: (type: string, value?: ProposalActionsFieldValue) => boolean;
+    validateUnsignedNumber: (value?: ProposalActionsFieldValue) => boolean;
+    isArrayType: (type: string) => boolean;
+    isTupleType: (type: string) => type is "tuple";
+    isNumberType: (type: string) => boolean;
+    isUnsignedNumberType: (type: string) => boolean;
+    isSignedNumberType: (type: string) => boolean;
+    getArrayItemType: (type: string) => string;
+    formValuesToFunctionParameters: (formValues: NestedProposalActionFormValues, formPrefix?: string) => unknown[] | undefined;
+    getNestedParameters: (parameter: IProposalActionInputDataParameter) => IProposalActionInputDataParameter[];
+    private guardArrayType;
+    private guardValueType;
+}
+export declare const proposalActionsDecoderUtils: ProposalActionsDecoderUtils;
+export {};

package/dist/types/src/modules/components/proposal/proposalActions/proposalActionsDefinitions.d.ts

@@ -21,11 +21,15 @@ export interface IProposalActionInputDataParameter {
     /**
      * The value of the argument being passed.
      */
-    value: string | number;
+    value: unknown;
     /**
      * The NatSpec notice for the parameter on the contract.
      */
     notice?: string;
+    /**
+     * Array of parameters for "tuple" type.
+     */
+    components?: Array<Omit<IProposalActionInputDataParameter, 'value'>>;
 }
 export interface IProposalActionInputData {
     /**
@@ -36,6 +40,10 @@ export interface IProposalActionInputData {
      * The name of the contract to interact with.
      */
     contract: string;
+    /**
+     * State mutability of the function (e.g. pure or payable).
+     */
+    stateMutability?: string;
     /**
      * The parameters to pass to the function.
      */

package/dist/types/src/modules/components/proposal/proposalActions/proposalActionsItem/index.d.ts

@@ -1,2 +1,2 @@
 export { ProposalActionsItem } from './proposalActionsItem';
-export type { IProposalActionsItemDropdownItem, IProposalActionsItemProps } from './proposalActionsItem.api';
+export type { IProposalActionsItemDropdownItem, IProposalActionsItemProps, ProposalActionsItemViewMode, } from './proposalActionsItem.api';

package/dist/types/src/modules/components/proposal/proposalActions/proposalActionsItem/proposalActionsItem.api.d.ts

@@ -1,6 +1,8 @@
 import type { IconType } from '../../../../../core';
 import type { IWeb3ComponentProps } from '../../../../types';
+import type { ProposalActionsDecoderView } from '../proposalActionsDecoder';
 import type { IProposalAction, ProposalActionComponent } from '../proposalActionsDefinitions';
+export type ProposalActionsItemViewMode = 'BASIC' | ProposalActionsDecoderView;
 export interface IProposalActionsItemDropdownItem<TAction extends IProposalAction = IProposalAction> {
     /**
      * Label of the item.
@@ -32,4 +34,15 @@ export interface IProposalActionsItemProps<TAction extends IProposalAction = IPr
      * Items displayed beside the "View as" menu.
      */
     dropdownItems?: Array<IProposalActionsItemDropdownItem<TAction>>;
+    /**
+     * Enables the edit-mode when set to true. The RAW view will be editable only if the action has no DECODED view,
+     * similarly the DECODED view will be editable only if the action has no BASIC view.
+     * The component must be wrapped through a form context provider when the property is set to true.
+     * @default false
+     */
+    editMode?: boolean;
+    /**
+     * Form prefix to be prepended to all proposal action text fields.
+     */
+    formPrefix?: string;
 }

package/dist/types/src/modules/components/proposal/proposalActions/proposalActionsItem/proposalActionsItem.d.ts

@@ -1,8 +1,8 @@
 import type { IProposalAction } from '../proposalActionsDefinitions';
 import type { IProposalActionsItemProps } from './proposalActionsItem.api';
-export declare enum ProposalActionViewMode {
-    BASIC = "BASIC",
-    DECODED = "DECODED",
-    RAW = "RAW"
-}
+/**
+ * The `<ProposalActions.Item />` component supports multiple view modes depending if the action supports a basic view
+ * and if the parameters for the actions are defined.
+ * **_NOTE:_** The component must be used inside a `<FormProvider />` component from `react-hook-form` when used in `editMode`.
+ */
 export declare const ProposalActionsItem: <TAction extends IProposalAction = IProposalAction>(props: IProposalActionsItemProps<TAction>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/src/modules/components/proposal/proposalActions/proposalActionsItem/{proposalActionsItemBasicView/proposalActionsItemBasicView.d.ts → proposalActionsItemBasicView.d.ts}

@@ -1,4 +1,4 @@
-import type { IProposalAction, IProposalActionComponentProps, ProposalActionComponent } from '../../proposalActionsDefinitions';
+import type { IProposalAction, IProposalActionComponentProps, ProposalActionComponent } from '../proposalActionsDefinitions';
 export interface IProposalActionsItemBasicViewProps<TAction extends IProposalAction = IProposalAction> extends IProposalActionComponentProps<TAction> {
     /**
      * Custom component to be rendered.

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

@@ -1 +1,2 @@
 export * from './useBlockExplorer';
+export * from './useFormContext';

package/dist/types/src/modules/hooks/useFormContext/index.d.ts

@@ -0,0 +1 @@
+export { useFormContext, type UseFormContextReturn } from './useFormContext';

package/dist/types/src/modules/hooks/useFormContext/useFormContext.d.ts

@@ -0,0 +1,3 @@
+import { type FieldValues, type UseFormReturn } from 'react-hook-form';
+export type UseFormContextReturn<TFormValues extends FieldValues = FieldValues> = UseFormReturn<TFormValues>;
+export declare const useFormContext: <TFormValues extends FieldValues>(enabled: boolean) => UseFormContextReturn<TFormValues>;

package/dist/types/src/modules/testUtils/generators/formContext.d.ts

@@ -0,0 +1,2 @@
+import type { UseFormContextReturn } from '../../hooks';
+export declare const generateFormContext: (context?: Partial<UseFormContextReturn>) => UseFormContextReturn;

package/dist/types/src/modules/testUtils/generators/index.d.ts

@@ -0,0 +1 @@
+export * from './formContext';

package/dist/types/src/modules/testUtils/index.d.ts

@@ -0,0 +1 @@
+export * from './generators';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aragon/gov-ui-kit",
-  "version": "1.0.57",
+  "version": "1.0.58",
   "description": "Implementation of the Aragon's Governance UI Kit",
   "main": "dist/index.es.js",
   "types": "dist/types/src/index.d.ts",
@@ -66,7 +66,7 @@
     "@tiptap/starter-kit": "^2.10.0",
     "blockies-ts": "^1.0.0",
     "classnames": "^2.0.0",
-    "framer-motion": "^11.11.0",
+    "framer-motion": "^11.12.0",
     "luxon": "^3.5.0",
     "react-dropzone": "^14.3.0",
     "react-imask": "^7.6.1",
@@ -75,9 +75,10 @@
   },
   "peerDependencies": {
     "@tailwindcss/typography": "^0.5.0",
-    "@tanstack/react-query": "^5.61.0",
+    "@tanstack/react-query": "^5.62.0",
     "react": "^18.2.0 || ^19.0.0",
     "react-dom": "^18.2.0 || ^19.0.0",
+    "react-hook-form": "^7.53.0",
     "tailwindcss": "^3.4.0",
     "viem": "^2.21.0",
     "wagmi": "^2.13.0"
@@ -87,24 +88,25 @@
     "@babel/preset-env": "^7.26.0",
     "@babel/preset-react": "^7.25.9",
     "@babel/preset-typescript": "^7.26.0",
+    "@hookform/devtools": "^4.3.1",
     "@rollup/plugin-commonjs": "^28.0.1",
     "@rollup/plugin-image": "^3.0.3",
     "@rollup/plugin-node-resolve": "^15.3.0",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^12.1.1",
     "@storybook/addon-designs": "^8.0.4",
-    "@storybook/addon-essentials": "^8.4.5",
-    "@storybook/addon-links": "^8.4.5",
+    "@storybook/addon-essentials": "^8.4.6",
+    "@storybook/addon-links": "^8.4.6",
     "@storybook/addon-styling-webpack": "^1.0.1",
     "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
-    "@storybook/blocks": "^8.4.5",
-    "@storybook/react": "^8.4.5",
-    "@storybook/react-webpack5": "^8.4.5",
+    "@storybook/blocks": "^8.4.6",
+    "@storybook/react": "^8.4.6",
+    "@storybook/react-webpack5": "^8.4.6",
     "@storybook/storybook-deployer": "^2.8.16",
     "@svgr/rollup": "^8.1.0",
     "@svgr/webpack": "^8.1.0",
     "@tailwindcss/typography": "^0.5.15",
-    "@tanstack/react-query": "^5.61.3",
+    "@tanstack/react-query": "^5.62.1",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
@@ -115,7 +117,7 @@
     "@types/sanitize-html": "^2.13.0",
     "autoprefixer": "^10.4.20",
     "cross-env": "^7.0.3",
-    "eslint": "^9.15.0",
+    "eslint": "^9.16.0",
     "eslint-import-resolver-typescript": "^3.6.3",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
@@ -130,22 +132,23 @@
     "lint-staged": "^15.2.10",
     "postcss": "^8.4.48",
     "postcss-loader": "^8.1.1",
-    "prettier": "^3.3.3",
+    "prettier": "^3.4.1",
     "prettier-plugin-organize-imports": "^4.1.0",
     "prettier-plugin-tailwindcss": "^0.6.9",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "rollup": "^4.27.4",
+    "react-hook-form": "^7.53.2",
+    "rollup": "^4.28.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-visualizer": "^5.12.0",
-    "storybook": "^8.4.5",
+    "storybook": "^8.4.6",
     "tailwindcss": "^3.4.15",
     "ts-jest": "^29.2.5",
     "typescript": "^5.7.2",
-    "typescript-eslint": "^8.16.0",
-    "viem": "^2.21.50",
-    "wagmi": "^2.13.0"
+    "typescript-eslint": "^8.17.0",
+    "viem": "^2.21.53",
+    "wagmi": "^2.13.3"
   },
   "bugs": {
     "url": "https://github.com/aragon/gov-ui-kit/issues"

package/dist/types/src/modules/components/proposal/proposalActions/proposalActionsItem/proposalActionsItemBasicView/index.d.ts

@@ -1 +0,0 @@
-export { ProposalActionsItemBasicView, type IProposalActionsItemBasicViewProps } from './proposalActionsItemBasicView';

package/dist/types/src/modules/components/proposal/proposalActions/proposalActionsItem/proposalActionsItemDecodedView/index.d.ts

@@ -1 +0,0 @@
-export { ProposalActionsItemDecodedView, type IProposalActionsItemDecodedViewProps, } from './proposalActionsItemDecodedView';

package/dist/types/src/modules/components/proposal/proposalActions/proposalActionsItem/proposalActionsItemDecodedView/proposalActionsItemDecodedView.d.ts

@@ -1,8 +0,0 @@
-import type { IProposalAction } from '../../proposalActionsDefinitions';
-export interface IProposalActionsItemDecodedViewProps {
-    /**
-     * Proposal action to render decoded view for.
-     */
-    action: IProposalAction;
-}
-export declare const ProposalActionsItemDecodedView: React.FC<IProposalActionsItemDecodedViewProps>;

package/dist/types/src/modules/components/proposal/proposalActions/proposalActionsItem/proposalActionsItemRawView/index.d.ts

@@ -1 +0,0 @@
-export { ProposalActionsItemRawView, type IProposalActionsItemRawViewProps } from './proposalActionsItemRawView';

package/dist/types/src/modules/components/proposal/proposalActions/proposalActionsItem/proposalActionsItemRawView/proposalActionsItemRawView.d.ts

@@ -1,8 +0,0 @@
-import type { IProposalAction } from '../../proposalActionsDefinitions';
-export interface IProposalActionsItemRawViewProps {
-    /**
-     * Proposal action to render the raw view for.
-     */
-    action: IProposalAction;
-}
-export declare const ProposalActionsItemRawView: React.FC<IProposalActionsItemRawViewProps>;