-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Basic React Hook Form implementation. * Basic board component with hardcoded board signature * Created constant and utils file * Setup hardcoded server action. * Removed unused global css * Updated README.md * EOL
- Loading branch information
1 parent
3077f14
commit 1504d9e
Showing
18 changed files
with
2,726 additions
and
289 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -34,3 +34,6 @@ yarn-error.log* | |
# typescript | ||
*.tsbuildinfo | ||
next-env.d.ts | ||
|
||
# Webstorm | ||
.idea |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,7 +1,37 @@ | ||
# Decision Log - Form Library | ||
|
||
This document outlines the decision process for determining which Form library to use for the project. | ||
This document outlines the decision process for determining which form library to use for the project. The following | ||
projects are under consideration: | ||
|
||
- [Generic HTML](https://react.dev/reference/react-dom/components/form) | ||
- [React Hook Form (RHF)](https://react-hook-form.com/) | ||
- [Shadcn](https://ui.shadcn.com/) | ||
|
||
## Comparison | ||
|
||
| Generic HTML | React Hook Form | Shadcn | | ||
| --------------------------------------------------------------------- | ------------------------------------------------------------------------------- | -------------------------------------------------- | | ||
| [ + ] Doesn't require additional libraries | [ + ] Widely used by the community | [ + ] Built ontop of React Hook Form | | ||
| [ - ] Doesn't include functionality such as input dependency natively | [ + ] Additional functionality such as schema validation and input dependencies | [ + ] Includes Component library | | ||
| | [ + ] Uses standard HTML tags | [ + ] Integrated with Tailwind CSS | | ||
| | | [ - ] Component complexity hides RHF functionality | | ||
|
||
While the Form component is relatively simple, and does not require validation, the types of algorithms possible is | ||
dependent on the selected expansions. Therefore, some form of input management is required. RNF provides this via | ||
`watch`. | ||
|
||
In terms of layout and styling, having a Tailwind CSS compatible set of Components is likely to speed up development. | ||
RHF integrates well with a number of component libraries, but Shadcn requires no additional work. However, Shadcn | ||
Components are overly verbose and complex and hide some of the RHF functionality in a way that decreases development | ||
speed even when custom component creation time is taken into consideration. | ||
|
||
## Outcome | ||
|
||
**React Hook Form** has been chosen as the form library. | ||
|
||
### Additional Suggested Functionality | ||
|
||
Two systems may help speed up the development of custom components and should be explored: | ||
|
||
- [@tailwindcss/forms](https://github.com/tailwindlabs/tailwindcss-forms): Basic styles for form components. | ||
- [Flowbite](https://flowbite.com/): Open source component library for Tailwind that provides styling examples. |
34 changes: 34 additions & 0 deletions
34
documentation/decision_logs/decision_log_hexagon_grid_library.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,34 @@ | ||
# Decision Log - Hexagon Grid Library | ||
|
||
This document outlines the decision process for determining which hexagon grid library to use for the project. The following | ||
projects are under consideration: | ||
|
||
- [HTML5 Canvas](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas) | ||
- [Konvas JS](https://konvajs.org/) | ||
- [Honeycomb](https://abbekeultjes.nl/honeycomb/) | ||
- [react-honeycomb](https://github.com/taraspolovyi/react-honeycomb) | ||
- [react-hexgrid](https://github.com/Hellenic/react-hexgrid) | ||
|
||
## Comparison | ||
|
||
| HTML5 Canvas | Konvas JS | Honeycomb | react-honeycomb | react-hexgrid | | ||
| ------------------------------------------------- | ----------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------- | ---------------------------------------------------------- | ------------------------------------------------------------------------------ | | ||
| [ + ] No additional library required | [ + ] Declarative React Canvas | [ + ] Grid can be defined instead of individual hexagons | [ + ] Grid can be defined instead of individual hexagons | [ + ] Grid can be defined instead of individual hexagons | | ||
| [ - ] Requires specific math drawing calculations | [ + ] Includes a huge range of additional functionality (events, animations, data serialisation, etc) | [ + ] Includes `json` serialisation | [ - ] Does not allow for Catan shaped grids | [ + ] Uses SVG to create auto scaling grids | | ||
| | [ - ] Requires specific math drawing calculations | [ - ] Does not include native image output (includes examples with third-party libraries) | [ - ] Single contributor, does not appear to be maintained | [ + ] Includes examples for Catan style grids | | ||
| | | | | [ ~ ] Last release in 2022, but it has 300 stars and multiple contributors | | ||
| | | | | [ - ] Only uses cubic coordinates (which were not used in the original project | | ||
|
||
In the original project, the grid math was a significant time sink, and a large proportion of the overall code. | ||
Interestingly, it appears that a number of projects have sprung up since then to try and handle this specific use-case, | ||
often referencing the [same document](https://www.redblobgames.com/grids/hexagons/) that was used in the original project. | ||
|
||
Therefore, it is probably prudent to ignore the general canvas solutions and pick a library that handles the coordinate | ||
geometry behind the scenes. | ||
|
||
With that in mind, `react-hexgrid` looks the most promising. However, it should be noted that the cubic coordinate | ||
system will require additional translation of the original algorithms. | ||
|
||
## Outcome | ||
|
||
**react-hexgrid** has been chosen as the hexagon grid library. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.