├── .all-contributorsrc ├── .eslintrc.js ├── .github └── workflows │ └── release.yml ├── .gitignore ├── .husky ├── commit-msg └── prepare-commit-msg ├── .vscode └── settings.json ├── CONTRIBUTING.md ├── LICENCE ├── PULL_REQUEST_TEMPLATE.md.txt ├── README.md ├── code-of-conduct.md ├── docs ├── .eslintrc.js ├── .gitignore ├── CHANGELOG.md ├── components │ ├── Callout.tsx │ ├── Code.tsx │ ├── CustomDemo.tsx │ ├── DebouncedDemo.tsx │ ├── Demo.tsx │ ├── Footer.tsx │ ├── HeaderLogo.tsx │ ├── HeroPulse │ │ └── Pulse.tsx │ ├── HomeDemo.tsx │ ├── Icon.tsx │ ├── InlineValidationDemo.tsx │ ├── Logo.tsx │ ├── NativeDemo.tsx │ ├── OnChangeDemo.tsx │ ├── OnSubmitDemo.tsx │ ├── Social.tsx │ ├── Tabs.tsx │ └── pages │ │ └── Home │ │ ├── Feature.tsx │ │ ├── HeroContent.tsx │ │ ├── Highlights.tsx │ │ └── index.tsx ├── custom.css ├── globals.css ├── index.d.ts ├── next-env.d.ts ├── next-sitemap.config.js ├── next.config.js ├── package.json ├── pages │ ├── _app.tsx │ ├── _document.tsx │ ├── _meta.json │ ├── about.md │ ├── api-reference │ │ ├── create-form.mdx │ │ └── use-form.mdx │ ├── createform │ │ ├── _meta.json │ │ ├── async-data.mdx │ │ ├── creating-forms │ │ │ ├── debounced-form.mdx │ │ │ ├── onchange-form.mdx │ │ │ └── onsubmit-form.mdx │ │ ├── form-submission.mdx │ │ ├── how-it-works.mdx │ │ ├── testing │ │ │ ├── testing-on-change.mdx │ │ │ └── testing-on-submit.mdx │ │ ├── using-your-form │ │ │ ├── custom-components.mdx │ │ │ └── native-elements.mdx │ │ └── validation │ │ │ ├── form-validation.mdx │ │ │ └── inline-validation.mdx │ ├── index.mdx │ ├── quick-start.mdx │ ├── tutorials │ │ ├── creating-forms.mdx │ │ ├── multi-step-form.md │ │ └── reactjs-building-forms.md │ └── useform │ │ ├── creating-a-form.mdx │ │ └── validation.mdx ├── postcss.config.js ├── project.json ├── public │ ├── favicon │ │ ├── android-chrome-192x192.png │ │ ├── android-chrome-512x512.png │ │ ├── apple-touch-icon.png │ │ ├── favicon-16x16.png │ │ ├── favicon-32x32.png │ │ ├── favicon.ico │ │ ├── favicon.png │ │ ├── favicon.svg │ │ └── site.webmanifest │ ├── images │ │ ├── hero.svg │ │ ├── logo.svg │ │ └── media.png │ ├── robots.txt │ ├── sitemap-0.xml │ └── sitemap.xml ├── tailwind.config.js ├── theme.config.tsx └── tsconfig.json ├── examples ├── .eslintrc.json ├── CHANGELOG.md ├── index.html ├── package.json ├── project.json ├── public │ └── favicon.ico ├── src │ ├── App.tsx │ ├── Examples │ │ ├── createForm │ │ │ ├── FormExample.tsx │ │ │ ├── MultiStep │ │ │ │ ├── AddressStep.tsx │ │ │ │ ├── BasicInfoStep.tsx │ │ │ │ ├── Form.tsx │ │ │ │ └── usePersonForm.ts │ │ │ ├── MultiStepWithYup │ │ │ │ ├── AddressStep.tsx │ │ │ │ ├── BasicInfoStep.tsx │ │ │ │ ├── Form.tsx │ │ │ │ └── usePersonForm.ts │ │ │ ├── RadioAndCheckbox.tsx │ │ │ ├── YupInlineValidation.tsx │ │ │ ├── YupValidation.tsx │ │ │ ├── ZodInlineValidation.tsx │ │ │ └── ZodValidation.tsx │ │ └── useForm │ │ │ └── FormData.tsx │ └── main.tsx ├── tsconfig.json └── vite.config.ts ├── img ├── createform-flow.png ├── logo.svg ├── media.png └── media.svg ├── package.json ├── packages ├── eslint-config │ ├── CHANGELOG.md │ ├── index.js │ └── package.json ├── object-utils │ ├── .eslintrc.js │ ├── CHANGELOG.md │ ├── README.md │ ├── jest.config.js │ ├── package.json │ ├── src │ │ ├── index.test.ts │ │ └── index.ts │ └── tsconfig.json ├── react │ ├── .eslintrc.js │ ├── CHANGELOG.md │ ├── README.md │ ├── jest.config.js │ ├── package.json │ ├── src │ │ ├── CreateForm │ │ │ ├── CreateForm.test.tsx │ │ │ ├── CreateForm.ts │ │ │ ├── Debounce.ts │ │ │ ├── Exception.ts │ │ │ ├── FieldsUtils.ts │ │ │ ├── Store.test.ts │ │ │ ├── Store.ts │ │ │ ├── Types.ts │ │ │ └── index.ts │ │ ├── Types.ts │ │ ├── UseForm │ │ │ ├── FieldsUtils.ts │ │ │ ├── Types.ts │ │ │ ├── UseForm.test.tsx │ │ │ ├── UseForm.tsx │ │ │ └── index.ts │ │ └── index.ts │ └── tsconfig.json ├── tsconfig │ ├── CHANGELOG.md │ ├── base.json │ ├── next.json │ ├── node16.json │ ├── package.json │ ├── react-library.json │ └── vite.json └── validation │ ├── .eslintrc.js │ ├── CHANGELOG.md │ ├── README.md │ ├── jest.config.js │ ├── package.json │ ├── src │ ├── index.test.ts │ └── index.ts │ └── tsconfig.json ├── pnpm-lock.yaml ├── pnpm-workspace.yaml ├── turbo.json └── version.config.json /.all-contributorsrc: -------------------------------------------------------------------------------- 1 | { 2 | "files": [ 3 | "README.md" 4 | ], 5 | "imageSize": 100, 6 | "commit": false, 7 | "commitConvention": "angular", 8 | "contributors": [ 9 | { 10 | "login": "nelsonuprety1", 11 | "name": "Nelson Uprety", 12 | "avatar_url": "https://avatars.githubusercontent.com/u/25173636?v=4", 13 | "profile": "https://nelsonuprety.netlify.app/", 14 | "contributions": [ 15 | "code" 16 | ] 17 | }, 18 | { 19 | "login": "jucian0", 20 | "name": "Juciano", 21 | "avatar_url": "https://avatars.githubusercontent.com/u/8399579?v=4", 22 | "profile": "http://juciano.com", 23 | "contributions": [ 24 | "code" 25 | ] 26 | } 27 | ], 28 | "contributorsPerLine": 7, 29 | "skipCi": true, 30 | "repoType": "github", 31 | "repoHost": "https://github.com", 32 | "projectName": "createform", 33 | "projectOwner": "jucian0" 34 | } 35 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | // This tells ESLint to load the config from the package `eslint-config-createform` 4 | extends: ["createform"], 5 | settings: { 6 | next: { 7 | rootDir: ["apps/*/"], 8 | }, 9 | }, 10 | }; 11 | -------------------------------------------------------------------------------- /.github/workflows/release.yml: -------------------------------------------------------------------------------- 1 | name: Release 2 | 3 | on: 4 | push: 5 | branches: 6 | - main 7 | 8 | concurrency: ${{ github.workflow }}-${{ github.ref }} 9 | 10 | jobs: 11 | release: 12 | name: Release 13 | runs-on: ubuntu-latest 14 | steps: 15 | - name: Checkout Repo 16 | uses: actions/checkout@v3 17 | with: 18 | fetch-depth: 0 19 | 20 | - name: Setup pnpm 7 21 | uses: pnpm/action-setup@v2 22 | with: 23 | version: 7 24 | 25 | - name: Setup Node.js 16.x 26 | uses: actions/setup-node@v2 27 | with: 28 | node-version: 16.x 29 | 30 | - name: Install Dependencies 31 | shell: bash 32 | run: pnpm i 33 | 34 | - name: Build 35 | shell: bash 36 | run: pnpm --filter=react... build 37 | 38 | ## We are going to replace it by a specif command to configure git environments 39 | - name: Temporally git user 40 | shell: bash 41 | run: git config --global user.name 'github-actions[bot]' && git config --global user.email 'github-actions[bot]@users.noreply.github.com' 42 | 43 | - name: Turbo Version 44 | shell: bash 45 | run: pnpm turbo-version 46 | 47 | - name: Turbo Release 48 | shell: bash 49 | env: 50 | GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} 51 | NPM_TOKEN: ${{ secrets.NPM_TOKEN }} 52 | run: pnpm turbo-release -s @createform/docs,@createform/examples 53 | 54 | - name: Push tags, and commits 55 | shell: bash 56 | run: git push --tags && git push 57 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | .turbo 4 | *.log 5 | .next 6 | dist 7 | dist-ssr 8 | *.local 9 | .env 10 | .cache 11 | server/dist 12 | public/dist 13 | storybook-static/ 14 | .npmrc 15 | .netrc 16 | pnpm-lock.yaml -------------------------------------------------------------------------------- /.husky/commit-msg: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env sh 2 | . "$(dirname -- "$0")/_/husky.sh" 3 | 4 | npm run commitlint --edit $1 5 | -------------------------------------------------------------------------------- /.husky/prepare-commit-msg: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env sh 2 | . "$(dirname -- "$0")/_/husky.sh" 3 | 4 | #exec < /dev/tty && npx cz --hook || true 5 | 6 | #unfortunally this hook can't work with semver library 7 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "codeium.enableSearch": true 3 | } 4 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | We're really glad you're reading this, because we need volunteer developers to help this project come to fruition. 👏 2 | 3 | ## Instructions 4 | 5 | These steps will guide you through contributing to this project: 6 | 7 | - Fork the repo 8 | - Clone it and install dependencies 9 | 10 | git clone https://github.com/jucian0/createform 11 | pnpm install 12 | 13 | Keep in mind that after running `pnpm install` the git repo is reset. So a good way to cope with this is to have a copy of the folder to push the changes, and the other to try them. 14 | 15 | Make and commit your changes. Make sure to use `pnpm commit`, and follow all commits steps. 16 | 17 | ## Docs 18 | 19 | To run docs: `pnpm dev` `localhost:3000` 20 | 21 | To run examples: `pnpm dev` `localhost:4200` 22 | 23 | Finally send a [GitHub Pull Request](https://github.com/jucian0/createform/compare?expand=1) with a clear list of what you've done (read more [about pull requests](https://help.github.com/articles/about-pull-requests/)). Make sure all of your commits are atomic (one feature per commit). 24 | -------------------------------------------------------------------------------- /LICENCE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Jucian0 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /PULL_REQUEST_TEMPLATE.md.txt: -------------------------------------------------------------------------------- 1 | THIS PROJECT IS IN MAINTENANCE MODE. We accept pull-requests for Bug Fixes **ONLY**. NO NEW FEATURES ACCEPTED! 2 | 3 | 4 | 5 | ## Description 6 | 7 | 8 | ## Related Issue 9 | 10 | 11 | 12 | 13 | 14 | ## Motivation and Context 15 | 16 | 17 | 18 | ## How Has This Been Tested? 19 | 20 | 21 | 22 | 23 | ## Screenshots (if appropriate): 24 | -------------------------------------------------------------------------------- /code-of-conduct.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as 6 | contributors and maintainers pledge to making participation in our project and 7 | our community a harassment-free experience for everyone, regardless of age, body 8 | size, disability, ethnicity, gender identity and expression, level of experience, 9 | nationality, personal appearance, race, religion, or sexual identity and 10 | orientation. 11 | 12 | ## Our Standards 13 | 14 | Examples of behavior that contributes to creating a positive environment 15 | include: 16 | 17 | - Using welcoming and inclusive language 18 | - Being respectful of differing viewpoints and experiences 19 | - Gracefully accepting constructive criticism 20 | - Focusing on what is best for the community 21 | - Showing empathy towards other community members 22 | 23 | Examples of unacceptable behavior by participants include: 24 | 25 | - The use of sexualized language or imagery and unwelcome sexual attention or 26 | advances 27 | - Trolling, insulting/derogatory comments, and personal or political attacks 28 | - Public or private harassment 29 | - Publishing others' private information, such as a physical or electronic 30 | address, without explicit permission 31 | - Other conduct which could reasonably be considered inappropriate in a 32 | professional setting 33 | 34 | ## Our Responsibilities 35 | 36 | Project maintainers are responsible for clarifying the standards of acceptable 37 | behavior and are expected to take appropriate and fair corrective action in 38 | response to any instances of unacceptable behavior. 39 | 40 | Project maintainers have the right and responsibility to remove, edit, or 41 | reject comments, commits, code, wiki edits, issues, and other contributions 42 | that are not aligned to this Code of Conduct, or to ban temporarily or 43 | permanently any contributor for other behaviors that they deem inappropriate, 44 | threatening, offensive, or harmful. 45 | 46 | ## Scope 47 | 48 | This Code of Conduct applies both within project spaces and in public spaces 49 | when an individual is representing the project or its community. Examples of 50 | representing a project or community include using an official project e-mail 51 | address, posting via an official social media account, or acting as an appointed 52 | representative at an online or offline event. Representation of a project may be 53 | further defined and clarified by project maintainers. 54 | 55 | ## Enforcement 56 | 57 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 58 | reported by contacting the project team at alexjovermorales@gmail.com. All 59 | complaints will be reviewed and investigated and will result in a response that 60 | is deemed necessary and appropriate to the circumstances. The project team is 61 | obligated to maintain confidentiality with regard to the reporter of an incident. 62 | Further details of specific enforcement policies may be posted separately. 63 | 64 | Project maintainers who do not follow or enforce the Code of Conduct in good 65 | faith may face temporary or permanent repercussions as determined by other 66 | members of the project's leadership. 67 | -------------------------------------------------------------------------------- /docs/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | extends: ["createform"], 4 | }; 5 | -------------------------------------------------------------------------------- /docs/.gitignore: -------------------------------------------------------------------------------- 1 | .next 2 | node_modules 3 | -------------------------------------------------------------------------------- /docs/components/Callout.tsx: -------------------------------------------------------------------------------- 1 | import React, { ReactElement, ReactNode } from "react"; 2 | import { 3 | LightBulbIcon, 4 | ExclamationIcon, 5 | ExclamationCircleIcon, 6 | InformationCircleIcon, 7 | } from "@heroicons/react/solid"; 8 | 9 | const THEMES = { 10 | info: { 11 | classes: 12 | "bg-blue-100 text-blue-800 dark:text-blue-300 dark:bg-blue-200 dark:bg-opacity-10", 13 | icon: , 14 | }, 15 | idea: { 16 | classes: 17 | "bg-gray-100 text-gray-800 dark:text-gray-300 dark:bg-gray-200 dark:bg-opacity-10", 18 | icon: , 19 | }, 20 | error: { 21 | classes: 22 | "bg-red-200 text-red-900 dark:text-red-200 dark:bg-red-600 dark:bg-opacity-30", 23 | icon: , 24 | }, 25 | default: { 26 | classes: 27 | "bg-orange-100 text-orange-800 dark:text-orange-300 dark:bg-orange-200 dark:bg-opacity-10", 28 | icon: , 29 | }, 30 | }; 31 | 32 | export default function Callout({ 33 | children, 34 | type = "default", 35 | icon, 36 | }: { 37 | children: ReactNode; 38 | type: keyof typeof THEMES; 39 | icon?: ReactElement; 40 | }) { 41 | return ( 42 |
43 |
50 | {icon || THEMES[type].icon} 51 |
52 |
{children}
53 |
54 | ); 55 | } 56 | -------------------------------------------------------------------------------- /docs/components/Code.tsx: -------------------------------------------------------------------------------- 1 | import clsx from "clsx"; 2 | 3 | type Props = { 4 | className?: string; 5 | border?: boolean; 6 | }; 7 | 8 | export function CodeWindow({ 9 | children, 10 | className, 11 | border = true, 12 | }: React.PropsWithChildren) { 13 | return ( 14 |
20 |
21 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 | {children} 35 |
36 |
37 |
38 | ); 39 | } 40 | -------------------------------------------------------------------------------- /docs/components/CustomDemo.tsx: -------------------------------------------------------------------------------- 1 | import { createForm } from "@createform/react"; 2 | import Select from "react-select"; 3 | import ReactDatePicker from "react-datepicker"; 4 | import "react-datepicker/dist/react-datepicker.css"; 5 | 6 | const useForm = createForm({ 7 | initialValues: { 8 | date: "", 9 | profession: null, 10 | }, 11 | mode: "onChange", 12 | }); 13 | 14 | export function FormDemo() { 15 | const { handleReset, handleSubmit, state, setFieldValue } = useForm(); 16 | const { values } = state; 17 | 18 | return ( 19 |
{ 22 | console.log(e, state); 23 | })} 24 | onReset={handleReset(() => {})} 25 | className="border dark:border-gray-800 p-5 rounded" 26 | > 27 |
28 | setFieldValue("date", e)} 32 | value={values.date.toString()} 33 | /> 34 |
35 |
36 | 48 | {touched.email && errors.email} 49 |
50 |
51 | 57 | 67 | 68 | {touched.password && errors.password} 69 | 70 |
71 | 72 |
73 |
74 | 84 |
85 | 94 |
95 | 101 | 107 |
108 | ); 109 | } 110 | -------------------------------------------------------------------------------- /docs/components/Demo.tsx: -------------------------------------------------------------------------------- 1 | const styles = { 2 | width: "100%", 3 | padding: "10px 0", 4 | display: "flex", 5 | justifyContent: "center", 6 | alignItems: "center", 7 | flexDirection: "column", 8 | 9 | h1: { 10 | fontSize: "3em", 11 | fontFamily: "'Roboto',sans-serif", 12 | color: "$primary", 13 | padding: "20px", 14 | }, 15 | 16 | div: { 17 | width: "100%", 18 | padding: "2px", 19 | iframe: { 20 | width: "100%", 21 | height: 700, 22 | border: "none", 23 | borderRadius: "8px", 24 | boxShadow: "$sm", 25 | position: "relative", 26 | }, 27 | }, 28 | }; 29 | 30 | export default function Demo(props) { 31 | return ( 32 |
33 |
34 |