Skip to content

Commit

Permalink
🚀 initial commit
Browse files Browse the repository at this point in the history
  • Loading branch information
Crhistian Ramirez committed Apr 3, 2023
0 parents commit adf70ad
Show file tree
Hide file tree
Showing 56 changed files with 73,704 additions and 0 deletions.
24 changes: 24 additions & 0 deletions .gitignore
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?
6 changes: 6 additions & 0 deletions CHANGELOG.md
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).
27 changes: 27 additions & 0 deletions CONTRIBUTING.md
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! 🍻
21 changes: 21 additions & 0 deletions LICENSE
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.
44 changes: 44 additions & 0 deletions README.md
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)
1 change: 1 addition & 0 deletions docs/.nojekyll
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.
78 changes: 78 additions & 0 deletions docs/assets/highlight.css
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); }
58 changes: 58 additions & 0 deletions docs/assets/main.js

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions docs/assets/search.js

Large diffs are not rendered by default.

Loading

0 comments on commit adf70ad

Please sign in to comment.