16 Commits

Author SHA1 Message Date
d1f5430374 chore: add semantic-release 2021-06-17 19:32:56 +02:00
fd166db46c feat: remove polyfill-object.fromentries dependency
BREAKING CHANGE: You must support `Object.fromEntries`
2021-06-17 19:27:37 +02:00
c90742b200 feat: export getFormDataObject and FormProps interface 2021-06-17 19:26:13 +02:00
7ac46825ee feat: no longer export by default Form component
BREAKING CHANGE: you must use `import { Form } from 'react-component-form'`
2021-06-17 19:24:21 +02:00
e3c4c53f23 fix(example): disable react profiling 2021-06-17 19:17:34 +02:00
c133ba5a20 fix(example): issue with gh-pages deploy 2021-06-17 19:09:46 +02:00
efc06a9639 fix(example): update title 2021-06-17 19:02:13 +02:00
f475f18b29 ci: disable caching .npm 2021-06-17 18:58:05 +02:00
f720068fcc ci(release): deploy example/dist to gh-pages 2021-06-17 18:52:59 +02:00
d4a3fc4573 chore: rewrite package 2021-06-17 18:48:19 +02:00
7c878fd5f1 chore(release): v1.3.0 2020-12-27 19:47:15 +01:00
f8f655a6af ci: fix nodejs caching 2020-10-29 17:03:19 +01:00
75221c24f6 ci: update node.js to cache dependencies 2020-10-29 16:47:15 +01:00
3dfcdaf81f ci: node.js >= 12 2020-10-26 03:14:42 +01:00
a8ca83123e fix: polyfill-object.fromentries 2020-10-26 02:56:36 +01:00
4058b48959 fix: delete Object.fromEntries ponyfill cause of bugs 2020-10-26 02:35:56 +01:00
52 changed files with 55397 additions and 50143 deletions

1
.commitlintrc.json Normal file
View File

@ -0,0 +1 @@
{ "extends": ["@commitlint/config-conventional"] }

View File

@ -1,5 +0,0 @@
build/
dist/
node_modules/
.snapshots/
*.min.js

View File

@ -1,35 +0,0 @@
{
"parser": "@typescript-eslint/parser",
"extends": [
"standard",
"standard-react",
"plugin:prettier/recommended",
"prettier/standard",
"prettier/react",
"plugin:@typescript-eslint/eslint-recommended"
],
"env": {
"node": true
},
"parserOptions": {
"ecmaVersion": 2020,
"ecmaFeatures": {
"legacyDecorators": true,
"jsx": true
}
},
"settings": {
"react": {
"version": "16"
}
},
"rules": {
"space-before-function-paren": 0,
"react/prop-types": 0,
"react/jsx-handler-names": 0,
"react/jsx-fragments": 0,
"react/no-unused-prop-types": 0,
"import/export": 0,
"no-use-before-define": [0]
}
}

View File

@ -1,76 +0,0 @@
# Contributor Covenant Code of Conduct
## Our Pledge
In the interest of fostering an open and welcoming environment, we as
contributors and maintainers pledge to make participation in our project and
our community a harassment-free experience for everyone, regardless of age, body
size, disability, ethnicity, sex characteristics, gender identity and expression,
level of experience, education, socio-economic status, nationality, personal
appearance, race, religion, or sexual identity and orientation.
## Our Standards
Examples of behavior that contributes to creating a positive environment
include:
- Using welcoming and inclusive language
- Being respectful of differing viewpoints and experiences
- Gracefully accepting constructive criticism
- Focusing on what is best for the community
- Showing empathy towards other community members
Examples of unacceptable behavior by participants include:
- The use of sexualized language or imagery and unwelcome sexual attention or
advances
- Trolling, insulting/derogatory comments, and personal or political attacks
- Public or private harassment
- Publishing others' private information, such as a physical or electronic
address, without explicit permission
- Other conduct which could reasonably be considered inappropriate in a
professional setting
## Our Responsibilities
Project maintainers are responsible for clarifying the standards of acceptable
behavior and are expected to take appropriate and fair corrective action in
response to any instances of unacceptable behavior.
Project maintainers have the right and responsibility to remove, edit, or
reject comments, commits, code, wiki edits, issues, and other contributions
that are not aligned to this Code of Conduct, or to ban temporarily or
permanently any contributor for other behaviors that they deem inappropriate,
threatening, offensive, or harmful.
## Scope
This Code of Conduct applies within all project spaces, and it also applies when
an individual is representing the project or its community in public spaces.
Examples of representing a project or community include using an official
project e-mail address, posting via an official social media account, or acting
as an appointed representative at an online or offline event. Representation of
a project may be further defined and clarified by project maintainers.
## Enforcement
Instances of abusive, harassing, or otherwise unacceptable behavior may be
reported by contacting the project team at <contact@divlo.fr>. All
complaints will be reviewed and investigated and will result in a response that
is deemed necessary and appropriate to the circumstances. The project team is
obligated to maintain confidentiality with regard to the reporter of an incident.
Further details of specific enforcement policies may be posted separately.
Project maintainers who do not follow or enforce the Code of Conduct in good
faith may face temporary or permanent repercussions as determined by other
members of the project's leadership.
## Attribution
This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
[homepage]: https://www.contributor-covenant.org
For answers to common questions about this code of conduct, see
https://www.contributor-covenant.org/faq

View File

@ -1,6 +1,7 @@
---
name: '🐛 Bug Report'
about: 'Report an unexpected problem or unintended behavior.'
title: '[Bug]'
labels: 'bug'
---

View File

@ -1,20 +1,18 @@
---
name: '📜 Documentation'
about: 'Correct spelling errors, improvements or additions to documentation files (README, CONTRIBUTING...).'
title: '[Documentation]'
labels: 'documentation'
---
<!--
Please make sure your issue has not already been fixed.
<!-- Please make sure your issue has not already been fixed. -->
Please place an x (no spaces - [x]) in all [ ] that apply.
-->
## Documentation
### Documentation :
<!-- Please uncomment the type of documentation problem this issue address -->
- [ ] Is Missing
- [ ] Is Confusing
- [ ] Has Typo errors
- [ ] Not Sure?
<!-- Documentation is Missing -->
<!-- Documentation is Confusing -->
<!-- Documentation has Typo errors -->
### Proposal
## Proposal

View File

@ -1,19 +1,20 @@
---
name: '✨ Feature Request'
about: 'Suggest a new feature idea.'
title: '[Feature]'
labels: 'feature request'
---
<!-- Please make sure your issue has not already been fixed. -->
### Description
## Description
<!-- A clear and concise description of the problem or missing capability... -->
### Describe the solution you'd like
## Describe the solution you'd like
<!-- If you have a solution in mind, please describe it. -->
### Describe alternatives you've considered
## Describe alternatives you've considered
<!-- Have you considered any alternative solutions or workarounds? -->

View File

@ -1,21 +1,20 @@
---
name: '🔧 Improvement'
about: 'Improve structure/format/performance/refactor/tests of the code.'
title: '[Improvement]'
labels: 'improvement'
---
<!--.
Please make sure your issue has not already been fixed.
<!-- Please make sure your issue has not already been fixed. -->
Please place an x (no spaces - [x]) in all [ ] that apply.
-->
## Type of Improvement
### Type of Improvement :
<!-- Please uncomment the type of improvements this issue address -->
- [ ] Files and Folders Structure
- [ ] Performance
- [ ] Refactoring code
- [ ] Tests
- [ ] Not Sure?
<!-- Files and Folders Structure -->
<!-- Performance -->
<!-- Refactoring code -->
<!-- Tests -->
<!-- Not Sure? -->
### Proposal
## Proposal

View File

@ -1,6 +1,7 @@
---
name: '🙋 Question'
about: 'Further information is requested.'
title: '[Question]'
labels: 'question'
---

View File

@ -1,29 +1,7 @@
<!--
<!-- Please first discuss the change you wish to make via issue before making a change. It might avoid a waste of your time. -->
Thanks a lot for your interest in contributing to react-component-form! 🎉
## What changes this PR introduce?
Please first discuss the change you wish to make via issue before making a change. It might avoid a waste of your time.
## List any relevant issue numbers
Before submitting your contribution, please take a moment to review this document:
https://github.com/Divlo/react-component-form/blob/master/.github/CONTRIBUTING.md
Please place an x (no spaces - [x]) in all [ ] that apply.
-->
### What type of change does this PR introduce?
- [ ] Bugfix
- [ ] Feature
- [ ] Refactor
- [ ] Documentation
- [ ] Not Sure?
### Does this PR introduce breaking changes?
- [ ] Yes
- [ ] No
### List any relevant issue numbers:
### Description:
## Is there anything you'd like reviewers to focus on?

View File

@ -1,15 +0,0 @@
# For more information see: https://docs.github.com/en/github/administering-a-repository/configuration-options-for-dependency-updates
version: 2
updates:
- package-ecosystem: 'github-actions'
directory: '/'
schedule:
interval: 'monthly'
- package-ecosystem: 'npm'
versioning-strategy: 'auto'
directory: '/'
open-pull-requests-limit: 10
schedule:
interval: 'monthly'

29
.github/workflows/build.yml vendored Normal file
View File

@ -0,0 +1,29 @@
name: 'Build'
on:
push:
branches: [master]
pull_request:
branches: [master]
jobs:
build:
runs-on: 'ubuntu-latest'
steps:
- uses: 'actions/checkout@v2'
- name: 'Use Node.js'
uses: 'actions/setup-node@v2.1.5'
with:
node-version: '14.x'
- run: 'npm install --global npm@7'
- name: 'Install'
run: 'npm ci'
- name: 'Build Package'
run: 'npm run build'
- name: 'Build Example'
run: 'cd example && npm ci && npm run build'

View File

@ -1,16 +0,0 @@
name: 'Lint Commit Messages'
on:
push:
branches: [master]
pull_request:
branches: [master]
jobs:
commitlint:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
with:
fetch-depth: 0
- uses: wagoid/commitlint-github-action@v2

28
.github/workflows/lint.yml vendored Normal file
View File

@ -0,0 +1,28 @@
name: 'Lint'
on:
push:
branches: [master]
pull_request:
branches: [master]
jobs:
lint:
runs-on: 'ubuntu-latest'
steps:
- uses: 'actions/checkout@v2'
- name: 'Use Node.js'
uses: 'actions/setup-node@v2.1.5'
with:
node-version: '14.x'
- run: 'npm install --global npm@7'
- name: 'Install'
run: 'npm ci'
- run: 'npm run lint:commit -- --to "${{ github.sha }}"'
- run: 'npm run lint:editorconfig'
- run: 'npm run lint:markdown'
- run: 'npm run lint:typescript'

View File

@ -1,24 +0,0 @@
name: Node.js CI
on:
push:
branches: [master]
pull_request:
branches: [master]
jobs:
build:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [10.x, 12.x, 14.x]
steps:
- uses: actions/checkout@v2
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v2.1.2
with:
node-version: ${{ matrix.node-version }}
- run: npm ci
- run: npm run test

39
.github/workflows/release.yml vendored Normal file
View File

@ -0,0 +1,39 @@
name: 'Release'
on:
push:
branches: [master]
jobs:
build:
runs-on: 'ubuntu-latest'
steps:
- uses: 'actions/checkout@v2'
- name: 'Use Node.js'
uses: 'actions/setup-node@v2.1.5'
with:
node-version: '14.x'
- run: 'npm install --global npm@7'
- name: 'Install'
run: 'npm ci'
- name: 'Build Package'
run: 'npm run build'
- name: 'Build Example'
run: 'cd example && npm ci && npm run build'
- name: 'Deploy Example'
uses: 'JamesIves/github-pages-deploy-action@4.1.4'
with:
branch: 'gh-pages'
folder: 'example/dist'
- name: 'Release'
run: 'npm run release'
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

26
.github/workflows/test.yml vendored Normal file
View File

@ -0,0 +1,26 @@
name: 'Test'
on:
push:
branches: [master]
pull_request:
branches: [master]
jobs:
test:
runs-on: 'ubuntu-latest'
steps:
- uses: 'actions/checkout@v2'
- name: 'Use Node.js'
uses: 'actions/setup-node@v2.1.5'
with:
node-version: '14.x'
- run: 'npm install --global npm@7'
- name: 'Install'
run: 'npm ci'
- name: 'Test'
run: 'npm run test'

25
.gitignore vendored
View File

@ -1,21 +1,6 @@
# See https://help.github.com/ignore-files/ for more about ignoring files.
# dependencies
node_modules
# builds
build
dist
.rpt2_cache
# misc
*.log
.DS_Store
.env
.env.local
.env.development.local
.env.test.local
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*
node_modules
.cache
dist
.parcel-cache

6
.markdownlint.json Normal file
View File

@ -0,0 +1,6 @@
{
"default": true,
"MD013": false,
"MD033": false,
"MD041": false
}

1
.npmrc Normal file
View File

@ -0,0 +1 @@
save-exact=true

View File

@ -1,10 +0,0 @@
{
"singleQuote": true,
"jsxSingleQuote": true,
"semi": false,
"tabWidth": 2,
"bracketSpacing": true,
"jsxBracketSameLine": false,
"arrowParens": "always",
"trailingComma": "none"
}

6
.prettierrc.json Normal file
View File

@ -0,0 +1,6 @@
{
"semi": false,
"singleQuote": true,
"jsxSingleQuote": true,
"trailingComma": "none"
}

19
.releaserc.json Normal file
View File

@ -0,0 +1,19 @@
{
"branches": ["master"],
"plugins": [
[
"@semantic-release/commit-analyzer",
{
"preset": "conventionalcommits"
}
],
[
"@semantic-release/release-notes-generator",
{
"preset": "conventionalcommits"
}
],
"@semantic-release/npm",
"@semantic-release/github"
]
}

View File

@ -1,4 +0,0 @@
language: node_js
node_js:
- 12
- 10

132
CODE_OF_CONDUCT.md Normal file
View File

@ -0,0 +1,132 @@
# Contributor Covenant Code of Conduct
## Our Pledge
We as members, contributors, and leaders pledge to make participation in our
community a harassment-free experience for everyone, regardless of age, body
size, visible or invisible disability, ethnicity, sex characteristics, gender
identity and expression, level of experience, education, socio-economic status,
nationality, personal appearance, race, religion, or sexual identity
and orientation.
We pledge to act and interact in ways that contribute to an open, welcoming,
diverse, inclusive, and healthy community.
## Our Standards
Examples of behavior that contributes to a positive environment for our
community include:
- Demonstrating empathy and kindness toward other people
- Being respectful of differing opinions, viewpoints, and experiences
- Giving and gracefully accepting constructive feedback
- Accepting responsibility and apologizing to those affected by our mistakes,
and learning from the experience
- Focusing on what is best not just for us as individuals, but for the
overall community
Examples of unacceptable behavior include:
- The use of sexualized language or imagery, and sexual attention or
advances of any kind
- Trolling, insulting or derogatory comments, and personal or political attacks
- Public or private harassment
- Publishing others' private information, such as a physical or email
address, without their explicit permission
- Other conduct which could reasonably be considered inappropriate in a
professional setting
## Enforcement Responsibilities
Community leaders are responsible for clarifying and enforcing our standards of
acceptable behavior and will take appropriate and fair corrective action in
response to any behavior that they deem inappropriate, threatening, offensive,
or harmful.
Community leaders have the right and responsibility to remove, edit, or reject
comments, commits, code, wiki edits, issues, and other contributions that are
not aligned to this Code of Conduct, and will communicate reasons for moderation
decisions when appropriate.
## Scope
This Code of Conduct applies within all community spaces, and also applies when
an individual is officially representing the community in public spaces.
Examples of representing our community include using an official e-mail address,
posting via an official social media account, or acting as an appointed
representative at an online or offline event.
## Enforcement
Instances of abusive, harassing, or otherwise unacceptable behavior may be
reported to the community leaders responsible for enforcement at
contact@divlo.fr.
All complaints will be reviewed and investigated promptly and fairly.
All community leaders are obligated to respect the privacy and security of the
reporter of any incident.
## Enforcement Guidelines
Community leaders will follow these Community Impact Guidelines in determining
the consequences for any action they deem in violation of this Code of Conduct:
### 1. Correction
**Community Impact**: Use of inappropriate language or other behavior deemed
unprofessional or unwelcome in the community.
**Consequence**: A private, written warning from community leaders, providing
clarity around the nature of the violation and an explanation of why the
behavior was inappropriate. A public apology may be requested.
### 2. Warning
**Community Impact**: A violation through a single incident or series
of actions.
**Consequence**: A warning with consequences for continued behavior. No
interaction with the people involved, including unsolicited interaction with
those enforcing the Code of Conduct, for a specified period of time. This
includes avoiding interactions in community spaces as well as external channels
like social media. Violating these terms may lead to a temporary or
permanent ban.
### 3. Temporary Ban
**Community Impact**: A serious violation of community standards, including
sustained inappropriate behavior.
**Consequence**: A temporary ban from any sort of interaction or public
communication with the community for a specified period of time. No public or
private interaction with the people involved, including unsolicited interaction
with those enforcing the Code of Conduct, is allowed during this period.
Violating these terms may lead to a permanent ban.
### 4. Permanent Ban
**Community Impact**: Demonstrating a pattern of violation of community
standards, including sustained inappropriate behavior, harassment of an
individual, or aggression toward or disparagement of classes of individuals.
**Consequence**: A permanent ban from any sort of public interaction within
the community.
## Attribution
This Code of Conduct is adapted from the [Contributor Covenant][homepage],
version 2.0, available at
[https://www.contributor-covenant.org/version/2/0/code_of_conduct.html][v2.0].
Community Impact Guidelines were inspired by
[Mozilla's code of conduct enforcement ladder][mozilla coc].
For answers to common questions about this code of conduct, see the FAQ at
[https://www.contributor-covenant.org/faq][faq]. Translations are available
at [https://www.contributor-covenant.org/translations][translations].
[homepage]: https://www.contributor-covenant.org
[v2.0]: https://www.contributor-covenant.org/version/2/0/code_of_conduct.html
[mozilla coc]: https://github.com/mozilla/diversity
[faq]: https://www.contributor-covenant.org/faq
[translations]: https://www.contributor-covenant.org/translations

View File

@ -1,27 +1,33 @@
# Contributing
# 💡 Contributing
Thanks a lot for your interest in contributing to **react-component-form**! 🎉
## Types of contributions :
## Code of Conduct
**react-component-form** has adopted the [Contributor Covenant](https://www.contributor-covenant.org/) as its Code of Conduct, and we expect project participants to adhere to it. Please read [the full text](./CODE_OF_CONDUCT.md) so that you can understand what actions will and will not be tolerated.
## Types of contributions
- Reporting a bug.
- Suggest a new feature idea.
- Correct spelling errors, improvements or additions to documentation files (README, CONTRIBUTING...).
- Correct spelling errors, improvements or additions to documentation files.
- Improve structure/format/performance/refactor/tests of the code.
## Pull Requests :
## Pull Requests
- **Please first discuss** the change you wish to make via [issue](https://github.com/Divlo/react-component-form/issues) before making a change. It might avoid a waste of your time.
- **Please first discuss** the change you wish to make via issues.
- Ensure your code respect [JavaScript Standard Style](https://standardjs.com/).
- Ensure your code respect the linter.
- Make sure your code passes the tests.
- Make sure your **code passes the tests**.
If you're adding new features to **react-component-form**, please include tests.
## Commits
The commit message guidelines respect [@commitlint/config-conventional](https://github.com/conventional-changelog/commitlint/tree/master/%40commitlint/config-conventional) and [Semantic Versioning](https://semver.org/) for releases.
The commit message guidelines respect
[@commitlint/config-conventional](https://github.com/conventional-changelog/commitlint/tree/master/%40commitlint/config-conventional)
and [Semantic Versioning](https://semver.org/) for releases.
### Types
@ -44,16 +50,3 @@ Types define which kind of changes you made to the project.
### Scopes
Scopes define what part of the code changed.
There are 2 principal scopes in the project :
- lib
- example
### Examples
```sh
git commit -m "feat(lib): add Form component"
git commit -m "docs(readme): update installation process"
git commit -m "fix(example): remove bugs"
```

23
LICENSE
View File

@ -1,8 +1,21 @@
The MIT License (MIT)
Copyright © 2020
MIT License
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:
Copyright (c) Divlo
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
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 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.
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.

View File

@ -5,11 +5,17 @@
</p>
<p align="center">
<a href="https://standardjs.com"><img src="https://img.shields.io/badge/code_style-standard-brightgreen.svg" alt="JavaScript Style Guide"/></a>
<a href="https://conventionalcommits.org"><img src="https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow.svg" alt="Conventional Commits" /></a>
<a href="./CONTRIBUTING.md"><img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat" /></a>
<a href="./LICENSE"><img src="https://img.shields.io/badge/licence-MIT-blue.svg" alt="Licence MIT"/></a>
<a href="./CODE_OF_CONDUCT.md"><img src="https://img.shields.io/badge/Contributor%20Covenant-v2.0%20adopted-ff69b4.svg" alt="Contributor Covenant" /></a>
<br />
<a href="https://github.com/Divlo/react-component-form/actions/workflows/build.yml"><img src="https://github.com/Divlo/react-component-form/actions/workflows/build.yml/badge.svg?branch=master" /></a>
<a href="https://github.com/Divlo/react-component-form/actions/workflows/lint.yml"><img src="https://github.com/Divlo/react-component-form/actions/workflows/lint.yml/badge.svg?branch=master" /></a>
<a href="https://github.com/Divlo/react-component-form/actions/workflows/test.yml"><img src="https://github.com/Divlo/react-component-form/actions/workflows/test.yml/badge.svg?branch=master" /></a>
<br />
<a href="https://conventionalcommits.org"><img src="https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow.svg" alt="Conventional Commits" /></a>
<a href="https://github.com/semantic-release/semantic-release"><img src="https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg" alt="semantic-release" /></a>
<a href="https://www.npmjs.com/package/react-component-form"><img src="https://img.shields.io/npm/v/react-component-form.svg" alt="npm version"></a>
<img src="https://github.com/Divlo/react-component-form/workflows/Node.js%20CI/badge.svg" alt="Node.js CI" />
</p>
## 📜 About
@ -18,8 +24,6 @@
Demo : [https://divlo.github.io/react-component-form/](https://divlo.github.io/react-component-form/).
This project was bootstrapped with [create-react-library](https://www.npmjs.com/package/create-react-library).
## 💾 Install
```sh
@ -30,7 +34,7 @@ npm install --save react-component-form
```tsx
import React from 'react'
import Form, { HandleForm } from 'react-component-form'
import { Form, HandleForm } from 'react-component-form'
const Example = () => {
const handleSubmit: HandleForm = (formData, formElement) => {
@ -56,6 +60,13 @@ Instead to get the `event` param you get `formData` and `formElement` params :
- `formData`: It's an object where the keys are the name of your inputs and the current value. Behind the scene, it uses the [FormData](https://developer.mozilla.org/docs/Web/API/FormData) constructor.
- `formElement`: It's the actual HTML form element in the DOM so for example you can access the `.reset()` method on a [HTMLFormElement](https://developer.mozilla.org/docs/Web/API/HTMLFormElement).
## 💡 Contributing
Anyone can help to improve the project, submit a Feature Request, a bug report or
even correct a simple spelling mistake.
The steps to contribute can be found in [CONTRIBUTING.md](./CONTRIBUTING.md).
## 📄 License
[MIT](./LICENSE)

View File

@ -1 +0,0 @@
module.exports = { extends: ['@commitlint/config-conventional'] }

3
example/.npmignore Normal file
View File

@ -0,0 +1,3 @@
node_modules
.cache
dist

View File

@ -1,5 +0,0 @@
This example was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
It is linked to the react-component-form package in the parent directory for development purposes.
You can run `npm install` and then `npm start` to test your package.

View File

Before

Width:  |  Height:  |  Size: 83 KiB

After

Width:  |  Height:  |  Size: 83 KiB

1
example/globals.d.ts vendored Normal file
View File

@ -0,0 +1 @@
declare module "*.jpg"

14
example/index.html Normal file
View File

@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="shortcut icon" href="./github.jpg" type="image/jpg">
<title>react-component-form</title>
</head>
<body>
<div id="root"></div>
<script src="./index.tsx"></script>
</body>
</html>

View File

@ -1,9 +1,9 @@
import React from 'react'
import ReactDOM from 'react-dom'
import Form, { HandleForm } from 'react-component-form'
import * as React from 'react'
import * as ReactDOM from 'react-dom'
import { Form, HandleForm } from '../.'
import GithubLogo from './github.jpg'
import './index.css'
import GitHubLogo from 'url:./github.jpg'
const App = () => {
const handleSubmit: HandleForm = (formData, formElement) => {
@ -19,7 +19,7 @@ const App = () => {
return (
<div className='container'>
<h2>{'<Form />'}</h2>
<h5 className='title-install'>npm i react-component-form</h5>
<h5 className='title-install'>npm install --save react-component-form</h5>
<Form onSubmit={handleSubmit} onChange={handleChange}>
<div className='form-group'>
@ -53,7 +53,7 @@ const App = () => {
rel='noopener noreferrer'
href='https://github.com/Divlo/react-component-form'
>
<img width='30px' alt='github' src={GithubLogo} />
<img width='30px' alt='github' src={GitHubLogo} />
</a>
</div>
</div>

60137
example/package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -1,44 +1,20 @@
{
"name": "react-component-form-example",
"homepage": ".",
"version": "0.0.0",
"private": true,
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"name": "example",
"version": "1.0.0",
"license": "MIT",
"scripts": {
"start": "node ../node_modules/react-scripts/bin/react-scripts.js start",
"build": "node ../node_modules/react-scripts/bin/react-scripts.js build",
"test": "node ../node_modules/react-scripts/bin/react-scripts.js test",
"eject": "node ../node_modules/react-scripts/bin/react-scripts.js eject"
"start": "parcel index.html",
"build": "parcel build index.html --public-url '/react-component-form/'"
},
"dependencies": {
"@testing-library/jest-dom": "file:../node_modules/@testing-library/jest-dom",
"@testing-library/react": "file:../node_modules/@testing-library/react",
"@testing-library/user-event": "file:../node_modules/@testing-library/user-event",
"@types/jest": "file:../node_modules/@types/jest",
"@types/node": "file:../node_modules/@types/node",
"@types/react": "file:../node_modules/@types/react",
"@types/react-dom": "file:../node_modules/@types/react-dom",
"react": "file:../node_modules/react",
"react-component-form": "file:..",
"react-dom": "file:../node_modules/react-dom",
"react-scripts": "file:../node_modules/react-scripts",
"typescript": "file:../node_modules/typescript"
"react-dom": "file:../node_modules/react-dom"
},
"devDependencies": {
"@babel/plugin-syntax-object-rest-spread": "^7.8.3"
"@parcel/transformer-image": "2.0.0-beta.2",
"@types/react": "17.0.11",
"@types/react-dom": "17.0.7",
"parcel": "2.0.0-beta.2",
"typescript": "4.3.3"
}
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.8 KiB

View File

@ -1,48 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta name="theme-color" content="#000000" />
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>react-component-form</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>

View File

@ -1,15 +0,0 @@
{
"short_name": "react-component-form",
"name": "react-component-form",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}

View File

@ -1 +0,0 @@
/// <reference types="react-scripts" />

View File

@ -1,30 +1,18 @@
{
"compilerOptions": {
"outDir": "dist",
"module": "esnext",
"lib": ["dom", "esnext", "DOM.Iterable"],
"moduleResolution": "node",
"jsx": "react",
"sourceMap": true,
"declaration": true,
"esModuleInterop": true,
"noImplicitReturns": true,
"noImplicitThis": true,
"noImplicitAny": true,
"strictNullChecks": true,
"suppressImplicitAnyIndexErrors": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"allowSyntheticDefaultImports": true,
"allowSyntheticDefaultImports": false,
"target": "es5",
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true
},
"include": ["src"],
"exclude": ["node_modules", "build"]
"module": "commonjs",
"jsx": "react",
"moduleResolution": "node",
"noImplicitAny": false,
"noUnusedLocals": false,
"noUnusedParameters": false,
"removeComments": true,
"strictNullChecks": true,
"preserveConstEnums": true,
"sourceMap": true,
"lib": ["es2015", "es2016", "dom"],
"types": ["node"]
}
}

44377
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -1,18 +1,9 @@
{
"name": "react-component-form",
"version": "1.2.0",
"version": "0.0.0-development",
"description": "Manage React Forms with ease.",
"author": "Divlo <contact@divlo.fr>",
"license": "MIT",
"files": [
"dist"
],
"main": "dist/index.js",
"module": "dist/index.modern.js",
"source": "src/index.tsx",
"engines": {
"node": ">=10"
},
"repository": {
"type": "git",
"url": "git+https://github.com/Divlo/react-component-form.git"
@ -25,58 +16,40 @@
"url": "https://github.com/Divlo/react-component-form/issues"
},
"homepage": "https://github.com/Divlo/react-component-form#readme",
"husky": {
"hooks": {
"commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
}
"module": "dist/react-component-form.esm.js",
"main": "dist/index.js",
"typings": "dist/index.d.ts",
"files": [
"dist"
],
"engines": {
"node": ">=12"
},
"scripts": {
"build": "microbundle-crl --no-compress --format modern,cjs",
"start": "microbundle-crl watch --no-compress --format modern,cjs",
"prepare": "run-s build",
"test": "run-s test:unit test:lint test:build",
"test:build": "run-s build",
"test:lint": "eslint ./**/*.{js,jsx,ts,tsx}",
"test:unit": "cross-env CI=1 react-scripts test --env=jsdom",
"test:watch": "react-scripts test --env=jsdom",
"predeploy": "cd example && npm install && npm run build",
"deploy": "gh-pages -d example/build"
"start": "tsdx watch",
"build": "tsdx build",
"test": "tsdx test --passWithNoTests",
"lint:commit": "commitlint",
"lint:editorconfig": "editorconfig-checker",
"lint:markdown": "markdownlint '**/*.md' --dot --ignore node_modules",
"lint:typescript": "tsdx lint",
"release": "semantic-release"
},
"peerDependencies": {
"react": "^16.0.0"
"react": ">=16"
},
"devDependencies": {
"@commitlint/cli": "^11.0.0",
"@commitlint/config-conventional": "^11.0.0",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.0.4",
"@testing-library/user-event": "^12.1.7",
"@types/jest": "^26.0.14",
"@types/node": "^14.11.8",
"@types/react": "^16.9.52",
"@types/react-dom": "^16.9.8",
"@typescript-eslint/eslint-plugin": "^4.0.1",
"@typescript-eslint/parser": "^4.0.1",
"babel-eslint": "^10.1.0",
"cross-env": "^7.0.2",
"eslint": "^6.6.0",
"eslint-config-prettier": "^6.12.0",
"eslint-config-standard": "^14.1.1",
"eslint-config-standard-react": "^9.2.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-react": "^7.21.3",
"eslint-plugin-standard": "^4.0.1",
"gh-pages": "^3.1.0",
"husky": "^4.3.0",
"microbundle-crl": "^0.13.11",
"npm-run-all": "^4.1.5",
"prettier": "^2.1.2",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "^3.4.3",
"typescript": "^4.0.3"
"@commitlint/cli": "12.1.4",
"@commitlint/config-conventional": "12.1.4",
"@testing-library/react": "11.2.7",
"@types/react": "17.0.11",
"@types/react-dom": "17.0.7",
"editorconfig-checker": "4.0.2",
"markdownlint-cli": "0.27.1",
"react": "17.0.2",
"react-dom": "17.0.2",
"semantic-release": "17.4.4",
"tsdx": "0.14.1",
"typescript": "4.3.3"
}
}

View File

@ -1,9 +0,0 @@
/*! fromentries. MIT License. Feross Aboukhadijeh <https://feross.org/opensource> */
export function fromEntries<T = any>(
iterable: Iterable<readonly [PropertyKey, T]>
) {
return [...iterable].reduce((object, [key, value]) => {
object[key] = value
return object
}, {})
}

View File

@ -1,5 +1,4 @@
import React, { useRef } from 'react'
import { fromEntries } from './fromEntries'
export interface FormDataObject {
[key: string]: FormDataEntryValue
@ -10,19 +9,19 @@ export type HandleForm = (
formElement: HTMLFormElement
) => void | Promise<void>
interface ReactFormProps
export interface ReactFormProps
extends Omit<React.HTMLProps<HTMLFormElement>, 'onSubmit' | 'onChange'> {}
interface FormProps extends ReactFormProps {
export interface FormProps extends ReactFormProps {
onSubmit?: HandleForm
onChange?: HandleForm
}
const getFormDataObject = (formElement: HTMLFormElement): FormDataObject => {
return fromEntries<FormDataEntryValue>(new FormData(formElement))
export const getFormDataObject = (formElement: HTMLFormElement): FormDataObject => {
return Object.fromEntries<FormDataEntryValue>(new FormData(formElement))
}
const Form = (props: FormProps): JSX.Element => {
export const Form = (props: FormProps): JSX.Element => {
const { onSubmit, onChange, children, ...rest } = props
const formRef = useRef<HTMLFormElement>(null)
@ -52,5 +51,3 @@ const Form = (props: FormProps): JSX.Element => {
</form>
)
}
export default Form

View File

@ -1 +0,0 @@
/// <reference types="react-scripts" />

18
src/typings.d.ts vendored
View File

@ -1,18 +0,0 @@
/**
* Default CSS definition for typescript,
* will be overridden with file-specific definitions by rollup
*/
declare module '*.css' {
const content: { [className: string]: string }
export default content
}
interface SvgrComponent
extends React.StatelessComponent<React.SVGAttributes<SVGElement>> {}
declare module '*.svg' {
const svgUrl: string
const svgComponent: SvgrComponent
export default svgUrl
export { svgComponent as ReactComponent }
}

View File

@ -1,10 +1,11 @@
import React from 'react'
import Form, { HandleForm } from '.'
import { render, cleanup, fireEvent } from '@testing-library/react'
import { Form, HandleForm } from '../src'
afterEach(cleanup)
describe('Form component', () => {
describe('<Form />', () => {
it('should get the formData and formElement onSubmit and onChange', () => {
let formData: { [k: string]: any } = {}
let formElement: any = null

View File

@ -1,41 +1,22 @@
{
"include": ["src", "types"],
"compilerOptions": {
"outDir": "dist",
"module": "esnext",
"target": "ES3",
"lib": [
"dom",
"esnext",
"DOM.Iterable"
],
"moduleResolution": "node",
"jsx": "react",
"sourceMap": true,
"module": "ESNext",
"lib": ["ESNext", "DOM", "DOM.Iterable"],
"importHelpers": false,
"declaration": true,
"esModuleInterop": true,
"sourceMap": true,
"rootDir": "./src",
"strict": true,
"noImplicitReturns": true,
"noImplicitThis": true,
"noImplicitAny": true,
"strictNullChecks": true,
"suppressImplicitAnyIndexErrors": true,
"noFallthroughCasesInSwitch": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"allowSyntheticDefaultImports": true,
"downlevelIteration": true,
"allowJs": true,
"moduleResolution": "node",
"jsx": "react",
"esModuleInterop": true,
"skipLibCheck": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true
},
"include": [
"src"
],
"exclude": [
"node_modules",
"dist",
"example"
]
"noEmit": true,
}
}

View File

@ -1,6 +0,0 @@
{
"extends": "./tsconfig.json",
"compilerOptions": {
"module": "commonjs"
}
}