-
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.
- Loading branch information
Crhistian Ramirez
committed
Apr 3, 2023
0 parents
commit adf70ad
Showing
56 changed files
with
73,704 additions
and
0 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 |
---|---|---|
@@ -0,0 +1,24 @@ | ||
# Logs | ||
logs | ||
*.log | ||
npm-debug.log* | ||
yarn-debug.log* | ||
yarn-error.log* | ||
pnpm-debug.log* | ||
lerna-debug.log* | ||
|
||
node_modules | ||
dist | ||
dist-ssr | ||
*.local | ||
|
||
# Editor directories and files | ||
.vscode/* | ||
!.vscode/extensions.json | ||
.idea | ||
.DS_Store | ||
*.suo | ||
*.ntvs* | ||
*.njsproj | ||
*.sln | ||
*.sw? |
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,6 @@ | ||
# Change Log | ||
|
||
All notable changes **after** version 1.0.0 to the react-hook-form-chakra library will be documented in this file. | ||
|
||
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), | ||
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). |
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,27 @@ | ||
Hello! Thanks for your interest in contributing! Before implementing new features and changes please create an issue so we can have a discussion about it! | ||
|
||
## ✨ Submitting a pull request | ||
|
||
1. Fork this repository | ||
2. Create a new branch with the name of the feature you plan to work on | ||
3. Install dependencies with npm install | ||
4. Make your changes to src/components | ||
5. Test your changes | ||
- You can run the frontend components by running `npm run dev` | ||
- Make sure you use your new or modified components in both demoWithProvider.tsx and demoWithoutProvider.tsx to ensure both use cases work properly | ||
6. Push your changes to your fork's branch | ||
7. Make a pull request to the main development branch | ||
|
||
## 🚀 Releasing | ||
|
||
Assuming you or a contributor followed the instructions for [making a pull request](#✨-submitting-a-pull-request) and are a maintainer you can follow these instructions to release a new version of the library. | ||
|
||
1. Run `npm run build` which will build the project and generate the documentation | ||
2. Update the [changelog](./CHANGELOG.md) | ||
3. Bump the version in package.json. Make sure it adheres to [semantic versioning](https://semver.org/) | ||
4. Create a release commit in the format: `:bookmark: v{newVersionHere}` | ||
5. Push changes to deployed master branch. | ||
6. Create and publish a new release on github | ||
7. Run `npm publish` | ||
8. Update the codesandbox | ||
9. Have a beer! 🍻 |
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,21 @@ | ||
MIT License | ||
|
||
Copyright (c) 2023 Crhistian Ramirez | ||
|
||
Permission is hereby granted, free of charge, to any person obtaining a copy | ||
of this software and associated documentation files (the "Software"), to deal | ||
in the Software without restriction, including without limitation the rights | ||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell | ||
copies of the Software, and to permit persons to whom the Software is | ||
furnished to do so, subject to the following conditions: | ||
|
||
The above copyright notice and this permission notice shall be included in all | ||
copies or substantial portions of the Software. | ||
|
||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR | ||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, | ||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE | ||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER | ||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, | ||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE | ||
SOFTWARE. |
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,44 @@ | ||
<div align="center"> | ||
<img src="https://github.com/crhistianramirez/react-hook-form-chakra/blob/main/images/logo.png?raw=true" alt="react-hook-form-chakra logo" /> | ||
</div> | ||
|
||
![license-badge](https://img.shields.io/github/license/crhistianramirez/react-hook-form-chakra) | ||
|
||
## Why? | ||
Because setting up low level bindings is boring and tedious, and keeps you away from actually building solutions. This library takes care of most of the grunt work and doesn't try to abstract away the underlying frameworks but rather embraces their composable architecture by leveraging [inversion of control](https://kentcdodds.com/blog/inversion-of-control#compound-components) and [composable components](https://kentcdodds.com/blog/inversion-of-control). | ||
|
||
## 🔥 Demo | ||
<!-- TODO: add link to code sandbox --> | ||
- [Demo with FormProvider]() (simpler but less performant, see [section below](#form-provider) for more info) | ||
- [Demo without FormProvider]() | ||
|
||
## ⚙️ Installation | ||
|
||
> Requires `react`, `react-hook-form`, and `@chakra-ui/react` as peer dependencies | ||
``` | ||
npm install react-hook-form-chakra | ||
``` | ||
|
||
or | ||
|
||
``` | ||
yarn add react-hook-form-chakra | ||
``` | ||
|
||
## 📝 Form Provider | ||
React hook form can be configured to use [FormProvider](https://react-hook-form.com/api/formprovider/) which uses context to implicitly pass form data down to all children components. This approach simplifies development but it does have some [performance implications](https://react-hook-form.com/advanced-usage/#FormProviderPerformance) to be mindful of. | ||
|
||
When using FormProvider [control]((https://react-hook-form.com/api/useform/control/)) is not required on components, otherwise it is. Check out [our demo](#-demo) for usage examples. | ||
|
||
## 📖 API Reference | ||
Documentation for all component props can be found [here](https://crhistianramirez.github.io/react-hook-form-chakra/). | ||
|
||
## 📄 License | ||
react-hook-form-chakra is an open-sourced software licensed under the [MIT license](https://github.com/crhistianramirez/react-hook-form-chakra/blob/main/LICENSE). | ||
|
||
## 🤝 Contributing | ||
Check out our [Contributing guide](https://github.com/crhistianramirez/react-hook-form-chakra/blob/main/CONTRIBUTING.md). | ||
|
||
## 🙇 Credit | ||
This library was adapted from another similar chakra binding library [made for Formik](https://github.com/thekaganugur/formik-chakra-ui) |
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 @@ | ||
TypeDoc added this file to prevent GitHub Pages from using Jekyll. You can turn off this behavior by setting the `githubPages` option to false. |
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,78 @@ | ||
:root { | ||
--light-hl-0: #800000; | ||
--dark-hl-0: #808080; | ||
--light-hl-1: #267F99; | ||
--dark-hl-1: #4EC9B0; | ||
--light-hl-2: #000000; | ||
--dark-hl-2: #D4D4D4; | ||
--light-hl-3: #E50000; | ||
--dark-hl-3: #9CDCFE; | ||
--light-hl-4: #0000FF; | ||
--dark-hl-4: #569CD6; | ||
--light-hl-5: #000000FF; | ||
--dark-hl-5: #D4D4D4; | ||
--light-hl-6: #001080; | ||
--dark-hl-6: #9CDCFE; | ||
--light-hl-7: #A31515; | ||
--dark-hl-7: #CE9178; | ||
--light-code-background: #FFFFFF; | ||
--dark-code-background: #1E1E1E; | ||
} | ||
|
||
@media (prefers-color-scheme: light) { :root { | ||
--hl-0: var(--light-hl-0); | ||
--hl-1: var(--light-hl-1); | ||
--hl-2: var(--light-hl-2); | ||
--hl-3: var(--light-hl-3); | ||
--hl-4: var(--light-hl-4); | ||
--hl-5: var(--light-hl-5); | ||
--hl-6: var(--light-hl-6); | ||
--hl-7: var(--light-hl-7); | ||
--code-background: var(--light-code-background); | ||
} } | ||
|
||
@media (prefers-color-scheme: dark) { :root { | ||
--hl-0: var(--dark-hl-0); | ||
--hl-1: var(--dark-hl-1); | ||
--hl-2: var(--dark-hl-2); | ||
--hl-3: var(--dark-hl-3); | ||
--hl-4: var(--dark-hl-4); | ||
--hl-5: var(--dark-hl-5); | ||
--hl-6: var(--dark-hl-6); | ||
--hl-7: var(--dark-hl-7); | ||
--code-background: var(--dark-code-background); | ||
} } | ||
|
||
:root[data-theme='light'] { | ||
--hl-0: var(--light-hl-0); | ||
--hl-1: var(--light-hl-1); | ||
--hl-2: var(--light-hl-2); | ||
--hl-3: var(--light-hl-3); | ||
--hl-4: var(--light-hl-4); | ||
--hl-5: var(--light-hl-5); | ||
--hl-6: var(--light-hl-6); | ||
--hl-7: var(--light-hl-7); | ||
--code-background: var(--light-code-background); | ||
} | ||
|
||
:root[data-theme='dark'] { | ||
--hl-0: var(--dark-hl-0); | ||
--hl-1: var(--dark-hl-1); | ||
--hl-2: var(--dark-hl-2); | ||
--hl-3: var(--dark-hl-3); | ||
--hl-4: var(--dark-hl-4); | ||
--hl-5: var(--dark-hl-5); | ||
--hl-6: var(--dark-hl-6); | ||
--hl-7: var(--dark-hl-7); | ||
--code-background: var(--dark-code-background); | ||
} | ||
|
||
.hl-0 { color: var(--hl-0); } | ||
.hl-1 { color: var(--hl-1); } | ||
.hl-2 { color: var(--hl-2); } | ||
.hl-3 { color: var(--hl-3); } | ||
.hl-4 { color: var(--hl-4); } | ||
.hl-5 { color: var(--hl-5); } | ||
.hl-6 { color: var(--hl-6); } | ||
.hl-7 { color: var(--hl-7); } | ||
pre, code { background: var(--code-background); } |
Large diffs are not rendered by default.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
Oops, something went wrong.