Refactor to accept multiquestion

[selankon]

This PR enhances Chakra UI components to support multi-process pages. No breaking changes have been introduced; all components function as before. The QuestionsFormProvider is now extended to support multiple elections.

This changes are used by vocdoni/ui-voting-page#10.

MultiProcess pages

UI components support rendering multiple elections on the same page. To enable multi-election support, wrap your election components as shown below:

import {
  ElectionQuestionsForm,
  QuestionsFormProvider,
  RenderWith,
  VoteButton,
} from '@vocdoni/chakra-components'
import { ElectionProvider } from '@vocdoni/react-providers'

//....

const renderWith: RenderWith[] = {
  { id: "electionId1" },
  { id: "electionId2" },
}

<ElectionProvider id={rootElectionId}>
  <QuestionsFormProvider renderWith={renderWith}>
    <ElectionQuestionsForm />
    <VoteButton />
  </QuestionsFormProvider>
</ElectionProvider>

The renderWith option in QuestionsFormProvider is essential for rendering multiple elections, it includes the ids of the elections to be rendered excluding the root election id.

Within the QuestionsFormProvider, you can use the useQuestionsForm hook to access the state of all elections along with other useful data:

voting,        // Indicates if any election is currently voting
voteAll,       // Function to vote for all elections
rootClient,    // Client of the root election
elections,     // State of each election
addElection,   // Function to add an election to the context
isAbleToVote,  // Indicates if voting is enabled for any election
voted,         // Indicates if any election has already been voted
isDisabled,    // Indicates if the form is manually disabled
setIsDisabled, // Function to manually enable or disable the form

Key considerations

• Place VoteButton inside the QuestionsFormProvider to ensure it properly reflects the election states across multiple elections. If VoteButton is outside this provider, it will only reflect the state of the root election (isAbleToVote, voted, voting, etc.).

Other inner changes consierations

• VoteButton logic is splitted to be reused for the MultiprocessVoteButton
• Also exported the logic that calculates the Vote Ballot

Relevant changes on Questions form:

• The questions form now stores the answers inside a Record<string, FieldValues> type, where string is the election id. On this way, we can have multiple elections/questions on the same form.
• This last point breaks compatibility with the Confirmation modals, that must be adapted.
• If the user wants, could set the formId. Useful to use specific id non related to the root election (now the form id contains the root election id)
• It can enable and disable the form programatically.
• A custom onSubmit function can be added. This function is thought to programatically submit the form. For example, submiting the form with a default options when is disabled.
• A global validation function can be added. This function is thought to be called before form submitting, in order to enable custom validations. A use case for example is to check that two elections contains the same number of choices.
• Some styles must change with the package update because the form tag is not inside of the chakra component anymore
• Voted component is modified to accept multiple nullifiers.

[elboletaire]

Some of the wrongly imported components (using the package name instead of relative routes) could explain the context issues you told me about.

Edit: also, the tests should be passing 🥲

[elboletaire]

Set as draft, since it's a WIP