Overview of what needs to be build

[TimDaub]

We want to setup a preact component that can be used both on mobile and desktop for allocating voting credits to e.g. a cause. A screenshot of how this may later look like can be found here:

Specifically, we want to create the following component:

But we really wanna focus on this part

In terms of interaction, we want the component (both on mobile and desktop) to be clickable "-" and "+". If the user clicks on the number "1", then they should be able to adjust the number via the keyboard too <input> field.

For any state update (-1, +1 or by via keyboard), we want a definable function to be invoked onUpdate).

Additionally, we need to pass the maximum number the user can increase the component to. Here's an example of the components possible proptypes

<NominalAllocator
  min="0" // means it can minimally reach the number 0
  max="12" // means it can maximally reach the number 12
  defaultValue="3" // defaultValue is e.g. the value that the component has when first being rendered
  onUpdate=${val => console.log(val)} /> // onUpdate is called every time the component's value changes

Finally a few requirements:

• We want to use preact
• The component needs to be super minimal; ideally let's not use any third-party packages
• We want to use esbuild to bundle the component
• We want to have a good coverage using unit tests if possible. If there's functions we can separate and make "pure", then we want to unit test those
• We want to co-develop a nice readme.md file such that other people might find the component helpful and download it