diff --git a/govtool/frontend/src/components/atoms/FormHelpfulText.tsx b/govtool/frontend/src/components/atoms/FormHelpfulText.tsx new file mode 100644 index 000000000..4ceed950a --- /dev/null +++ b/govtool/frontend/src/components/atoms/FormHelpfulText.tsx @@ -0,0 +1,23 @@ +import { Typography } from "@mui/material"; + +import { FormHelpfulTextProps } from "./types"; + +export const FormHelpfulText = ({ + helpfulText, + helpfulTextStyle, +}: FormHelpfulTextProps) => { + return ( + helpfulText && ( + + {helpfulText} + + ) + ); +}; diff --git a/govtool/frontend/src/components/atoms/InfoText.tsx b/govtool/frontend/src/components/atoms/InfoText.tsx new file mode 100644 index 000000000..399ea6804 --- /dev/null +++ b/govtool/frontend/src/components/atoms/InfoText.tsx @@ -0,0 +1,9 @@ +import { InfoTextProps, Typography } from "."; + +export const InfoText = ({ label, sx }: InfoTextProps) => { + return ( + + {label.toLocaleUpperCase()} + + ); +}; diff --git a/govtool/frontend/src/components/atoms/Input.tsx b/govtool/frontend/src/components/atoms/Input.tsx index b29958aec..029b47a88 100644 --- a/govtool/frontend/src/components/atoms/Input.tsx +++ b/govtool/frontend/src/components/atoms/Input.tsx @@ -41,12 +41,19 @@ export const Input = forwardRef( inputProps={{ "data-testid": dataTestId }} inputRef={inputRef} sx={{ - backgroundColor: errorMessage ? "inputRed" : "transparent", + backgroundColor: errorMessage ? "inputRed" : "white", border: 1, borderColor: errorMessage ? "red" : "secondaryBlue", borderRadius: 50, padding: "8px 16px", width: "100%", + "& input.Mui-disabled": { + WebkitTextFillColor: "#4C495B", + }, + "&.Mui-disabled": { + backgroundColor: "#F5F5F8", + borderColor: "#9792B5", + }, ...sx, }} {...rest} diff --git a/govtool/frontend/src/components/atoms/TextArea.tsx b/govtool/frontend/src/components/atoms/TextArea.tsx new file mode 100644 index 000000000..06c778a04 --- /dev/null +++ b/govtool/frontend/src/components/atoms/TextArea.tsx @@ -0,0 +1,70 @@ +import { forwardRef, useCallback, useImperativeHandle, useRef } from "react"; +import { TextareaAutosize, styled } from "@mui/material"; + +import { useScreenDimension } from "@hooks"; + +import { TextAreaProps } from "./types"; + +const TextAreaBase = styled(TextareaAutosize)( + () => ` + font-family: "Poppins"; + font-size: 16px; + font-weight: 400; + ::placeholder { + font-family: "Poppins"; + font-size: 16px; + font-weight: 400; + color: #a6a6a6; + } + ` +); + +export const TextArea = forwardRef( + ({ errorMessage, maxLength = 500, onBlur, onFocus, ...props }, ref) => { + const { isMobile } = useScreenDimension(); + const textAraeRef = useRef(null); + + const handleFocus = useCallback( + (e: React.FocusEvent) => { + onFocus?.(e); + textAraeRef.current?.focus(); + }, + [] + ); + + const handleBlur = useCallback( + (e: React.FocusEvent) => { + onBlur?.(e); + textAraeRef.current?.blur(); + }, + [] + ); + + useImperativeHandle( + ref, + () => + ({ + focus: handleFocus, + blur: handleBlur, + ...textAraeRef.current, + } as unknown as HTMLTextAreaElement), + [handleBlur, handleFocus] + ); + + return ( + + ); + } +); diff --git a/govtool/frontend/src/components/atoms/index.ts b/govtool/frontend/src/components/atoms/index.ts index b022b4cea..7072b7635 100644 --- a/govtool/frontend/src/components/atoms/index.ts +++ b/govtool/frontend/src/components/atoms/index.ts @@ -6,7 +6,9 @@ export * from "./ClickOutside"; export * from "./CopyButton"; export * from "./DrawerLink"; export * from "./FormErrorMessage"; +export * from "./FormHelpfulText"; export * from "./HighlightedText"; +export * from "./InfoText"; export * from "./Input"; export * from "./Link"; export * from "./LoadingButton"; @@ -19,6 +21,7 @@ export * from "./ScrollToManage"; export * from "./ScrollToTop"; export * from "./Spacer"; export * from "./StakeRadio"; +export * from "./TextArea"; export * from "./Tooltip"; export * from "./Typography"; export * from "./VotePill"; diff --git a/govtool/frontend/src/components/atoms/types.ts b/govtool/frontend/src/components/atoms/types.ts index 8aafaaf39..34f0fdf14 100644 --- a/govtool/frontend/src/components/atoms/types.ts +++ b/govtool/frontend/src/components/atoms/types.ts @@ -4,6 +4,8 @@ import { CheckboxProps as MUICheckboxProps, InputBaseProps, TypographyProps as MUITypographyProps, + TextareaAutosizeProps, + SxProps, } from "@mui/material"; export type ButtonProps = Omit & { @@ -55,3 +57,17 @@ export type FormErrorMessageProps = { errorMessage?: string; errorStyles?: MUITypographyProps; }; + +export type FormHelpfulTextProps = { + helpfulText?: string; + helpfulTextStyle?: MUITypographyProps; +}; + +export type TextAreaProps = TextareaAutosizeProps & { + errorMessage?: string; +}; + +export type InfoTextProps = { + label: string; + sx?: SxProps; +}; diff --git a/govtool/frontend/src/components/molecules/Field/Input.tsx b/govtool/frontend/src/components/molecules/Field/Input.tsx index 41b2875d6..58dbe521e 100644 --- a/govtool/frontend/src/components/molecules/Field/Input.tsx +++ b/govtool/frontend/src/components/molecules/Field/Input.tsx @@ -1,7 +1,12 @@ import { forwardRef, useCallback, useImperativeHandle, useRef } from "react"; import { Box } from "@mui/material"; -import { FormErrorMessage, Input as InputBase, Typography } from "@atoms"; +import { + FormErrorMessage, + FormHelpfulText, + Input as InputBase, + Typography, +} from "@atoms"; import { InputFieldProps } from "./types"; @@ -10,6 +15,8 @@ export const Input = forwardRef( { errorMessage, errorStyles, + helpfulText, + helpfulTextStyle, label, labelStyles, layoutStyles, @@ -45,11 +52,20 @@ export const Input = forwardRef( return ( {label && ( - + {label} )} + ( + ( + { + errorMessage, + errorStyles, + helpfulText, + helpfulTextStyle, + label, + labelStyles, + layoutStyles, + maxLength = 500, + onBlur, + onFocus, + ...props + }, + ref + ) => { + const textAreaRef = useRef(null); + + const handleFocus = useCallback( + (e: React.FocusEvent) => { + onFocus?.(e); + textAreaRef.current?.focus(); + }, + [] + ); + + const handleBlur = useCallback( + (e: React.FocusEvent) => { + onBlur?.(e); + textAreaRef.current?.blur(); + }, + [] + ); + + useImperativeHandle( + ref, + () => + ({ + focus: handleFocus, + blur: handleBlur, + ...textAreaRef.current, + } as unknown as HTMLTextAreaElement), + [handleBlur, handleFocus] + ); + return ( + + {label && ( + + {label} + + )} + + + + + {props?.value?.toString()?.length ?? 0}/{maxLength} + + + ); + } +); diff --git a/govtool/frontend/src/components/molecules/Field/index.tsx b/govtool/frontend/src/components/molecules/Field/index.tsx index c5e953689..b954e18b1 100644 --- a/govtool/frontend/src/components/molecules/Field/index.tsx +++ b/govtool/frontend/src/components/molecules/Field/index.tsx @@ -2,10 +2,12 @@ import React, { PropsWithChildren } from "react"; import { Checkbox } from "./Checkbox"; import { Input } from "./Input"; +import { TextArea } from "./TextArea"; type FieldComposition = React.FC & { Input: typeof Input; Checkbox: typeof Checkbox; + TextArea: typeof TextArea; }; const Field: FieldComposition = ({ children }) => { @@ -14,6 +16,7 @@ const Field: FieldComposition = ({ children }) => { Field.Checkbox = Checkbox; Field.Input = Input; +Field.TextArea = TextArea; export { Field }; diff --git a/govtool/frontend/src/components/molecules/Field/types.ts b/govtool/frontend/src/components/molecules/Field/types.ts index 05382ef6d..8867231a9 100644 --- a/govtool/frontend/src/components/molecules/Field/types.ts +++ b/govtool/frontend/src/components/molecules/Field/types.ts @@ -1,10 +1,17 @@ import { BoxProps, TypographyProps as MUITypographyProps } from "@mui/material"; -import { CheckboxProps, InputProps, TypographyProps } from "@atoms"; +import { + CheckboxProps, + InputProps, + TextAreaProps, + TypographyProps, +} from "@atoms"; export type InputFieldProps = InputProps & { errorMessage?: string; errorStyles?: MUITypographyProps; + helpfulText?: string; + helpfulTextStyle?: MUITypographyProps; label?: string; labelStyles?: TypographyProps; layoutStyles?: BoxProps; @@ -17,3 +24,13 @@ export type CheckboxFieldProps = CheckboxProps & { labelStyles?: TypographyProps; layoutStyles?: BoxProps; }; + +export type TextAreaFieldProps = TextAreaProps & { + errorMessage?: string; + errorStyles?: MUITypographyProps; + helpfulText?: string; + helpfulTextStyle?: MUITypographyProps; + label?: string; + labelStyles?: TypographyProps; + layoutStyles?: BoxProps; +}; diff --git a/govtool/frontend/src/components/organisms/ChooseGovernanceActionType.tsx b/govtool/frontend/src/components/organisms/ChooseGovernanceActionType.tsx index 91eec706e..40c50f17e 100644 --- a/govtool/frontend/src/components/organisms/ChooseGovernanceActionType.tsx +++ b/govtool/frontend/src/components/organisms/ChooseGovernanceActionType.tsx @@ -34,7 +34,7 @@ export const ChooseGovernanceActionType = ({ return GOVERNANCE_ACTION_TYPES.map((type, index) => { const isChecked = getValues("type") === type; return ( - <> +
{index + 1 < GOVERNANCE_ACTION_TYPES.length ? : null} - +
); }); }; diff --git a/govtool/frontend/src/components/organisms/ControlledField/Input.tsx b/govtool/frontend/src/components/organisms/ControlledField/Input.tsx index a58d4c91d..d9a2e2f34 100644 --- a/govtool/frontend/src/components/organisms/ControlledField/Input.tsx +++ b/govtool/frontend/src/components/organisms/ControlledField/Input.tsx @@ -1,32 +1,33 @@ -import { useCallback } from "react"; +import { forwardRef, useCallback } from "react"; import { Controller, get } from "react-hook-form"; import { Field } from "@molecules"; import { ControlledInputProps, RenderInputProps } from "./types"; -export const Input = ({ - control, - name, - errors, - rules, - ...props -}: ControlledInputProps) => { - const errorMessage = get(errors, name)?.message as string; +export const Input = forwardRef( + ({ control, name, errors, rules, ...props }, ref) => { + const errorMessage = get(errors, name)?.message as string; - const renderInput = useCallback( - ({ field }: RenderInputProps) => ( - - ), - [errorMessage, props] - ); + const renderInput = useCallback( + ({ field }: RenderInputProps) => ( + + ), + [errorMessage, props] + ); - return ( - - ); -}; + return ( + + ); + } +); diff --git a/govtool/frontend/src/components/organisms/ControlledField/TextArea.tsx b/govtool/frontend/src/components/organisms/ControlledField/TextArea.tsx new file mode 100644 index 000000000..163b6562d --- /dev/null +++ b/govtool/frontend/src/components/organisms/ControlledField/TextArea.tsx @@ -0,0 +1,32 @@ +import { useCallback } from "react"; +import { Controller, get } from "react-hook-form"; + +import { Field } from "@molecules"; + +import { ControlledTextAreaProps, RenderInputProps } from "./types"; + +export const TextArea = ({ + control, + name, + errors, + rules, + ...props +}: ControlledTextAreaProps) => { + const errorMessage = get(errors, name)?.message as string; + + const renderInput = useCallback( + ({ field }: RenderInputProps) => ( + + ), + [errorMessage, props] + ); + + return ( + + ); +}; diff --git a/govtool/frontend/src/components/organisms/ControlledField/index.tsx b/govtool/frontend/src/components/organisms/ControlledField/index.tsx index 1cb8c7d5c..e7a50f7ed 100644 --- a/govtool/frontend/src/components/organisms/ControlledField/index.tsx +++ b/govtool/frontend/src/components/organisms/ControlledField/index.tsx @@ -2,10 +2,12 @@ import React, { PropsWithChildren } from "react"; import { Checkbox } from "./Checkbox"; import { Input } from "./Input"; +import { TextArea } from "./TextArea"; type ControlledFieldComposition = React.FC & { Checkbox: typeof Checkbox; Input: typeof Input; + TextArea: typeof TextArea; }; const ControlledField: ControlledFieldComposition = ({ children }) => { @@ -14,5 +16,6 @@ const ControlledField: ControlledFieldComposition = ({ children }) => { ControlledField.Checkbox = Checkbox; ControlledField.Input = Input; +ControlledField.TextArea = TextArea; export { ControlledField }; diff --git a/govtool/frontend/src/components/organisms/ControlledField/types.ts b/govtool/frontend/src/components/organisms/ControlledField/types.ts index f75c9b978..6bf85727d 100644 --- a/govtool/frontend/src/components/organisms/ControlledField/types.ts +++ b/govtool/frontend/src/components/organisms/ControlledField/types.ts @@ -1,4 +1,8 @@ -import { CheckboxFieldProps, InputFieldProps } from "@molecules"; +import { + CheckboxFieldProps, + InputFieldProps, + TextAreaFieldProps, +} from "@molecules"; import { Control, ControllerRenderProps, @@ -9,8 +13,8 @@ import { } from "react-hook-form"; export type ControlledInputProps = InputFieldProps & { - control: Control; - errors: FieldErrors; + control?: Control; + errors?: FieldErrors; name: Path; rules?: Omit; }; @@ -28,3 +32,10 @@ export type ControlledCheckboxProps = Omit< export type RenderInputProps = { field: ControllerRenderProps; }; + +export type ControlledTextAreaProps = TextAreaFieldProps & { + control: Control; + errors: FieldErrors; + name: Path; + rules?: Omit; +}; diff --git a/govtool/frontend/src/components/organisms/CreateGovernanceActionForm.tsx b/govtool/frontend/src/components/organisms/CreateGovernanceActionForm.tsx new file mode 100644 index 000000000..cd6cf3157 --- /dev/null +++ b/govtool/frontend/src/components/organisms/CreateGovernanceActionForm.tsx @@ -0,0 +1,156 @@ +import { Dispatch, SetStateAction, useCallback } from "react"; +import { useFieldArray } from "react-hook-form"; +import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline"; + +import { Button, InfoText, Spacer, Typography } from "@atoms"; +import { GOVERNANCE_ACTIONS_FIELDS } from "@consts"; +import { useCreateGovernanceActionForm, useTranslation } from "@hooks"; +import { Field } from "@molecules"; + +import { BgCard } from "./BgCard"; +import { ControlledField } from "./ControlledField"; + +const LINK_PLACEHOLDER = "https://website.com/"; +const MAX_NUMBER_OF_LINKS = 7; + +type ChooseGovernanceActionTypeProps = { + setStep: Dispatch>; +}; + +export const CreateGovernanceActionForm = ({ + setStep, +}: ChooseGovernanceActionTypeProps) => { + const { t } = useTranslation(); + const { control, errors, getValues, register, watch } = + useCreateGovernanceActionForm(); + const { + append, + fields: links, + remove, + } = useFieldArray({ + control, + name: "links", + }); + + const governanceActionType = getValues("type"); + const fields = + GOVERNANCE_ACTIONS_FIELDS.find( + (field) => field.name === governanceActionType + )?.fields ?? []; + + // TODO: Replace any + const isContinueButtonDisabled = Object.keys(fields).some( + (field: any) => !watch(field) + ); + + const onClickContinue = () => { + setStep(3); + }; + + const onClickBack = () => { + setStep(1); + }; + + const renderGovernanceActionField = () => { + return Object.entries(fields).map(([key, value]) => { + const label = + key.charAt(0).toUpperCase() + key.slice(1).replace("_", " "); + + if (value.component === "input") { + return ( + + ); + } + if (value.component === "textarea") { + return ( + + ); + } + }); + }; + + const addLink = useCallback(() => { + append({ link: "" }); + }, [append]); + + const removeLink = useCallback( + (index: number) => { + remove(index); + }, + [remove] + ); + + const renderLinks = useCallback(() => { + return links.map((field, index) => { + return ( + 1 ? ( + removeLink(index)} + /> + ) : null + } + key={field.id} + label={t("forms.link") + ` ${index + 1}`} + layoutStyles={{ mb: 3 }} + placeholder={LINK_PLACEHOLDER} + /> + ); + }); + }, [links]); + + return ( + + + + {t("createGovernanceAction.formTitle")} + + + + + {renderGovernanceActionField()} + + + {t("createGovernanceAction.references")} + + + {renderLinks()} + {links?.length < MAX_NUMBER_OF_LINKS ? ( + + ) : null} + + + ); +}; diff --git a/govtool/frontend/src/components/organisms/index.ts b/govtool/frontend/src/components/organisms/index.ts index 749a01357..c787e72aa 100644 --- a/govtool/frontend/src/components/organisms/index.ts +++ b/govtool/frontend/src/components/organisms/index.ts @@ -2,6 +2,7 @@ export * from "./BgCard"; export * from "./ChooseGovernanceActionType"; export * from "./ChooseStakeKeyPanel"; export * from "./ChooseWalletModal"; +export * from "./CreateGovernanceActionForm"; export * from "./ControlledField"; export * from "./DashboardCards"; export * from "./DashboardCards"; diff --git a/govtool/frontend/src/consts/governanceActionTypes.ts b/govtool/frontend/src/consts/governanceActionTypes.ts index b3b6a8539..8930119d8 100644 --- a/govtool/frontend/src/consts/governanceActionTypes.ts +++ b/govtool/frontend/src/consts/governanceActionTypes.ts @@ -1 +1,64 @@ export const GOVERNANCE_ACTION_TYPES = ["Info", "Treasury"]; + +export const GOVERNANCE_ACTIONS_FIELDS = [ + { + name: "Info", + fields: { + title: { + component: "input", + placeholder: "A name for this Action", + tip: "", + }, + abstract: { + component: "textarea", + placeholder: "Summary", + tip: "General summary of the Action", + }, + motivation: { + component: "textarea", + placeholder: "Problem this GA will solve", + tip: "How will this solve a problem", + }, + rationale: { + component: "textarea", + placeholder: "Content of Governance Action", + tip: "Put all the content of the GA here", + }, + }, + }, + { + name: "Treasury", + fields: { + title: { + component: "input", + placeholder: "A name for this Action", + tip: "", + }, + abstract: { + component: "textarea", + placeholder: "Summary", + tip: "General summary of the Action", + }, + motivation: { + component: "textarea", + placeholder: "Problem this GA will solve", + tip: "How will this solve a problem", + }, + Rationale: { + component: "textarea", + placeholder: "Content of Governance Action", + tip: "Put all the content of the GA here", + }, + receiving_address: { + component: "input", + placeholder: "Receiving address", + tip: "", + }, + amount: { + component: "input", + placeholder: "e.g. 20000", + tip: "", + }, + }, + }, +]; diff --git a/govtool/frontend/src/hooks/forms/useCreateGovernanceActionForm.ts b/govtool/frontend/src/hooks/forms/useCreateGovernanceActionForm.ts index ce2aaadc0..565cdca9b 100644 --- a/govtool/frontend/src/hooks/forms/useCreateGovernanceActionForm.ts +++ b/govtool/frontend/src/hooks/forms/useCreateGovernanceActionForm.ts @@ -3,11 +3,13 @@ import { useFormContext } from "react-hook-form"; type createGovernanceActionValues = { type: string; + links?: { link: string }[]; }; export const defaulCreateGovernanceActionValues: createGovernanceActionValues = { type: "", + links: [{ link: "" }], }; export const useCreateGovernanceActionForm = () => { @@ -20,6 +22,7 @@ export const useCreateGovernanceActionForm = () => { handleSubmit, setValue, watch, + register, } = useFormContext(); const onSubmit = useCallback(async () => { @@ -40,5 +43,6 @@ export const useCreateGovernanceActionForm = () => { setValue, submitForm: handleSubmit(onSubmit), watch, + register, }; }; diff --git a/govtool/frontend/src/i18n/locales/en.ts b/govtool/frontend/src/i18n/locales/en.ts index 8483755e6..5b775de1a 100644 --- a/govtool/frontend/src/i18n/locales/en.ts +++ b/govtool/frontend/src/i18n/locales/en.ts @@ -124,6 +124,8 @@ export const en = { }, createGovernanceAction: { chooseGATypeTitle: "Choose a Governance Action type", + formTitle: "Governance Action details", + references: "References and Supporting Information", title: "Create a Governance Action", }, delegation: { @@ -187,8 +189,14 @@ export const en = { forms: { hashPlaceholder: "The hash of metadata at URL", howCreateUrlAndHash: "How to create URL and hash?", + link: "Link", urlWithContextPlaceholder: "Your URL with with your context", urlWithInfoPlaceholder: "Your URL with extra info about you", + createGovernanceAction: { + typeLabel: "Governance Action Type", + typeTip: + "To change the Governance Action Type go back to the previous page.", + }, errors: { hashInvalidFormat: "Invalid hash format", hashInvalidLength: "Hash must be exactly 64 characters long", @@ -427,6 +435,7 @@ export const en = { "Warning, no registered stake keys, using unregistered stake keys", }, abstain: "Abstain", + addLink: "+ Add link", back: "Back", backToDashboard: "Back to dashboard", backToList: "Back to the list", @@ -443,7 +452,9 @@ export const en = { nextStep: "Next step", no: "No", ok: "Ok", + optional: "Optional", register: "Register", + required: "required", seeTransaction: "See transaction", select: "Select", skip: "Skip", diff --git a/govtool/frontend/src/pages/CreateGovernanceAction.tsx b/govtool/frontend/src/pages/CreateGovernanceAction.tsx index 295dda462..bc7a8fb2c 100644 --- a/govtool/frontend/src/pages/CreateGovernanceAction.tsx +++ b/govtool/frontend/src/pages/CreateGovernanceAction.tsx @@ -14,6 +14,7 @@ import { import { BackToButton } from "@molecules"; import { ChooseGovernanceActionType, + CreateGovernanceActionForm, DashboardTopNav, Footer, } from "@organisms"; @@ -77,6 +78,7 @@ export const CreateGovernanceAction = () => { setStep={setStep} /> )} + {step === 2 && } {isMobile &&