feat(vote): extract the vote state logic in an opt in svelte module

[giamir]

SPARK-155

This PR is making our Vote.svelte component much dumber than it was and leave to consumers the job of managing the state (e.g. react to downvote and upvote clicks and update the other props accordingly).

There are also part of the vote state logic though (such as optimistic updates) that will end up being repeated over and over by product teams with potentially slightly different behavior which would only end up confusing the user.

For this reason we also distribute a svelte module (vote-state.svelte.ts) which contains a createVoteState factory which takes initial state values and return reactive props that can be spread in the Vote component.

Example

<script lang="ts">
  import Vote from "./Vote.svelte";
  import { createVoteState } from "./vote-state.svelte";

  const voteState = createVoteState({
    total: 12,
    onUpvote: async () => {
      const res = await fetch("/api/vote", {
        method: "POST",
        body: JSON.stringify({ vote: "up" })
      });
      const data = await res.json();
      // Return server values to override optimistic update
      return { total: data.total };
    },
    onDownvote: async () => {
      const res = await fetch("/api/vote", {
        method: "POST",
        body: JSON.stringify({ vote: "down" })
      });
      const data = await res.json();
      return { total: data.total };
    },
  });
</script>

<Vote {...voteState} />

Storybook preview

[changeset-bot]

🦋 Changeset detected

Latest commit: ee21670

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[netlify]

✅ Deploy Preview for stacks ready!

Name	Link
🔨 Latest commit	ee21670
🔍 Latest deploy log	https://app.netlify.com/projects/stacks/deploys/697b4491dd33090008bcc682
😎 Deploy Preview	https://deploy-preview-2152--stacks.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[netlify]

✅ Deploy Preview for stacks-svelte ready!

Name	Link
🔨 Latest commit	ee21670
🔍 Latest deploy log	https://app.netlify.com/projects/stacks-svelte/deploys/697b4491b827d60008aed51b
😎 Deploy Preview	https://deploy-preview-2152--stacks-svelte.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[mukunku]

Lgtm