Migrate accordion to xstate5

[Devessier]

📝 Description

This is a PR to start migrating machines to XState 5. I start with the Accordion machine.

⛳️ Current behavior (updates)

Currently, the Accordion machine uses a custom XState-ish implementation for its state machine.

🚀 New behavior

Here, I use XState 5 and @xstate/react.

💣 Is this a breaking change (Yes/No):

No

📝 Additional Information

This is a first pass on the problem. I directly coded on the page of the Accordion machine.

Here are things that we can improve or should discuss:

• Watchers are not part of XState. Instead, I wrote the code that watchers used to run where it was actually executed. For instance, value and multiple properties from the context are listened to run the coarseValue function, which prevents the value from reaching an invalid state. Instead of relying on a watcher, I run the corseValue function every time I assign a new value to the value property, including when the machine starts (replacing the created hook).
• I use the new setup function from XState to strongly type the machine without needing the help of Typegen.
• I listen to the CONTEXT.SYNC which is sent from a useEffect that listens to changes to controls.context. The coarseValue function is applied before merging the following context.
• I created the function getComputedContext to resolve the computed properties. I searched but was unsure if these properties should be made available to the end user. They are only internal and resolved in the accordionConnect function.
• I used contextFakelyAugmented as a trick to avoid being obliged to send computed properties to the dom functions, as it didn't seem required.
• I used the assertEvent function from XState to narrow the type of events in actions and guards. We might want to reimplement it so there isn't a cost in production.
• The Visualizer still works. XState 5 exposes different data on the current state, but the essential remains.
• I conditionally call onValueChange and onFocusChange in the assign actions to update the value and focusedValue properties. I would have preferred to call these functions in a separate action rather than inside the assign action, but it would have caused more headaches than necessary.

[changeset-bot]

⚠️ No Changeset found

Latest commit: b30af32

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

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

💥 An error occurred when fetching the changed packages and changesets in this PR

Some errors occurred when validating the changesets config:
The package "xstate-v5" depends on the ignored package "@zag-js/shared", but "xstate-v5" is not being ignored. Please add "xstate-v5" to the `ignore` option.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
zag-nextjs	✅ Ready (Inspect)	Visit Preview	Feb 21, 2024 7:59pm
zag-solid	✅ Ready (Inspect)	Visit Preview	Feb 21, 2024 7:59pm
zag-vue	✅ Ready (Inspect)	Visit Preview	Feb 21, 2024 7:59pm
zag-website	❌ Failed (Inspect)		Feb 21, 2024 7:59pm

[segunadebayo]

I appreciate the efforts you put into this @Devessier.

Given the amount of work needed to make this work, I imagine it's quite overwhelming, and you might not have enough time to review all the components and examples.

Let's put this aside for now and revisit this decision to migrate to XState later in the future.

Thank you