https://github.com/with-heart/7guis-xstate-stream

Code for a with-heart stream series where we solve The 7 Tasks of 7GUIs using xstate and a few other libraries
https://github.com/with-heart/7guis-xstate-stream

7guis chakra-ui jest testing-library xstate

Last synced: 16 days ago
JSON representation

Code for a with-heart stream series where we solve The 7 Tasks of 7GUIs using xstate and a few other libraries

• Host: GitHub
• URL: https://github.com/with-heart/7guis-xstate-stream
• Owner: with-heart
• Created: 2022-01-31T14:20:44.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2022-02-06T17:06:04.000Z (about 3 years ago)
• Last Synced: 2024-11-28T07:50:23.621Z (3 months ago)
• Topics: 7guis, chakra-ui, jest, testing-library, xstate
• Language: TypeScript
• Homepage:
• Size: 231 KB
• Stars: 4
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# `7guis-xstate-stream`

This repository serves as a starting point for a stream (series, probably) where

I'll solve [The 7 Tasks of 7GUIs][7tasks] using [`xstate`][xstate] along with a

few other technologies:

- [Chakra UI][chakra-ui]

- [Storybook][storybook]

- [`jest`][jest]

- [`testing-library`][testing-library]

> The tasks were selected by the following criteria. The task set should be as

> small as possible yet reflect as many typical (or fundamental or

> representative) challenges in GUI programming as possible. Each task should be

> as simple and self-contained as possible yet not too artificial. Preferably, a

> task should be based on existing examples as that gives the task more

> justification to be useful and there already will be at least one reference

> implementation.

The 7 Tasks are a set of GUI-based challenges, with each being increasingly more

complex than the last. This affords us an opportunity to gradually explore the

technologies we're using. Each task has new lessons for us to learn:

- how to capture feature requirements as tests with `jest` and `testing-library`

- how to build isolated components with Storybook

- how to design a GUI with Chakra UI

- how to manage complex logic with `xstate`

I'll be streaming on Twitch:

[twitch.tv/with_heart](https://twitch.tv/with_heart)

## Solutions

- [Task 1: Counter](https://github.com/with-heart/7guis-xstate-stream/compare/1-solution)

- [Task 2: Temperature Converter](https://github.com/with-heart/7guis-xstate-stream/compare/2-solution)

## TODO

- [ ] Add solutions as branches

[7tasks]: https://eugenkiss.github.io/7guis/tasks

[7guis]: https://eugenkiss.github.io/7guis/

[xstate]: https://github.com/statelyai/xstate

[testing-library]: https://testing-library.com/

[chakra-ui]: https://chakra-ui.com/

[storybook]: https://storybook.js.org/

[jest]: https://jestjs.io/