├── .vscode └── settings.json ├── packages ├── react │ ├── src │ │ ├── use-form │ │ │ ├── index.ts │ │ │ ├── fields-utils.ts │ │ │ ├── types.ts │ │ │ └── use-form.test.tsx │ │ ├── index.ts │ │ ├── create-form │ │ │ ├── index.ts │ │ │ ├── exception.ts │ │ │ ├── fields-utils.ts │ │ │ ├── debounce.ts │ │ │ ├── store.test.ts │ │ │ ├── store.ts │ │ │ └── types.ts │ │ └── types.ts │ ├── .eslintrc.js │ ├── tsconfig.json │ ├── jest.config.js │ └── package.json ├── object-utils │ ├── .eslintrc.js │ ├── tsconfig.json │ ├── jest.config.js │ ├── CHANGELOG.md │ ├── package.json │ └── src │ │ ├── index.test.ts │ │ └── index.ts ├── validation │ ├── .eslintrc.js │ ├── tsconfig.json │ ├── jest.config.js │ ├── CHANGELOG.md │ ├── package.json │ └── src │ │ ├── index.ts │ │ └── index.test.ts ├── tsconfig │ ├── package.json │ ├── node16.json │ ├── react-library.json │ ├── vite.json │ ├── base.json │ ├── next.json │ └── CHANGELOG.md └── eslint-config │ ├── index.js │ ├── package.json │ └── CHANGELOG.md ├── img ├── media.png ├── createform-flow.png └── logo.svg ├── pnpm-workspace.yaml ├── docs ├── public │ ├── favicon.ico │ ├── favicon.png │ └── images │ │ ├── createform-flow.png │ │ └── logo.svg ├── .gitignore ├── app │ ├── routes.ts │ ├── routes │ │ ├── components │ │ │ ├── index.tsx │ │ │ ├── icon.tsx │ │ │ ├── pulse.tsx │ │ │ └── hero-content.tsx │ │ └── home.tsx │ ├── docs │ │ ├── search.ts │ │ ├── mdx-components.tsx │ │ └── page.tsx │ ├── demos │ │ ├── demo.tsx │ │ ├── native-demo.tsx │ │ ├── custom-demo.tsx │ │ ├── inline-validation-demo.tsx │ │ ├── on-submit-demo.tsx │ │ ├── debounced-demo.tsx │ │ └── on-change-demo.tsx │ ├── mdx-components.tsx │ ├── source.ts │ ├── app.css │ └── root.tsx ├── react-router.config.ts ├── content │ └── docs │ │ ├── meta.json │ │ ├── useform │ │ ├── validation.mdx │ │ └── creating-a-form.mdx │ │ ├── createform │ │ ├── form-submission.mdx │ │ ├── async-data.mdx │ │ ├── using-your-form │ │ │ ├── native-elements.mdx │ │ │ └── custom-components.mdx │ │ ├── validation │ │ │ └── inline-validation.mdx │ │ ├── creating-forms │ │ │ ├── onchange-form.mdx │ │ │ └── debounced-form.mdx │ │ ├── testing │ │ │ ├── testing-on-change.mdx │ │ │ └── testing-on-submit.mdx │ │ └── how-it-works.mdx │ │ ├── about.md │ │ ├── index.mdx │ │ ├── migration.mdx │ │ └── api-reference │ │ └── use-form.mdx ├── vite.config.ts ├── tsconfig.json ├── package.json └── CHANGELOG.md ├── examples ├── public │ └── favicon.ico ├── tsconfig.json ├── src │ ├── main.tsx │ ├── App.tsx │ └── Examples │ │ ├── createForm │ │ ├── MultiStep │ │ │ ├── use-person-form.ts │ │ │ ├── Form.tsx │ │ │ ├── address-step.tsx │ │ │ └── basic-info-step.tsx │ │ ├── MultiStepWithYup │ │ │ ├── Form.tsx │ │ │ ├── use-person-form.ts │ │ │ ├── basic-info-step.tsx │ │ │ └── address-step.tsx │ │ ├── yup-validation.tsx │ │ ├── zod-validation.tsx │ │ ├── radio-and-checkbox.tsx │ │ ├── yup-inline-validation.tsx │ │ ├── zod-inline-validation.tsx │ │ └── form-example.tsx │ │ └── useForm │ │ └── form-data.tsx ├── .eslintrc.json ├── index.html ├── vite.config.ts ├── package.json └── project.json ├── .husky ├── commit-msg └── prepare-commit-msg ├── .gitignore ├── version.config.json ├── .eslintrc.js ├── turbo.json ├── .all-contributorsrc ├── package.json ├── CONTRIBUTING.md ├── PULL_REQUEST_TEMPLATE.md.txt ├── LICENCE ├── .github └── workflows │ └── release.yml └── code-of-conduct.md /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "codeium.enableSearch": true 3 | } 4 | -------------------------------------------------------------------------------- /packages/react/src/use-form/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./use-form"; 2 | -------------------------------------------------------------------------------- /img/media.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jucian0/createform/HEAD/img/media.png -------------------------------------------------------------------------------- /pnpm-workspace.yaml: -------------------------------------------------------------------------------- 1 | packages: 2 | - "docs" 3 | - "examples" 4 | - "packages/*" 5 | -------------------------------------------------------------------------------- /packages/react/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./create-form"; 2 | export * from "./use-form"; 3 | -------------------------------------------------------------------------------- /docs/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jucian0/createform/HEAD/docs/public/favicon.ico -------------------------------------------------------------------------------- /docs/public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jucian0/createform/HEAD/docs/public/favicon.png -------------------------------------------------------------------------------- /img/createform-flow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jucian0/createform/HEAD/img/createform-flow.png -------------------------------------------------------------------------------- /packages/react/src/create-form/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./create-form"; 2 | export * from "./types"; 3 | -------------------------------------------------------------------------------- /docs/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | /node_modules/ 3 | 4 | # React Router 5 | /.react-router/ 6 | /build/ 7 | -------------------------------------------------------------------------------- /examples/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jucian0/createform/HEAD/examples/public/favicon.ico -------------------------------------------------------------------------------- /packages/react/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | extends: ["createform"], 4 | }; 5 | -------------------------------------------------------------------------------- /packages/object-utils/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | extends: ["createform"], 4 | }; 5 | -------------------------------------------------------------------------------- /packages/validation/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | extends: ["createform"], 4 | }; 5 | -------------------------------------------------------------------------------- /.husky/commit-msg: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env sh 2 | . "$(dirname -- "$0")/_/husky.sh" 3 | 4 | npm run commitlint --edit $1 5 | -------------------------------------------------------------------------------- /docs/public/images/createform-flow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jucian0/createform/HEAD/docs/public/images/createform-flow.png -------------------------------------------------------------------------------- /packages/react/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@createform/tsconfig/react-library.json", 3 | "include": ["."], 4 | "exclude": ["dist", "build", "node_modules"] 5 | } -------------------------------------------------------------------------------- /packages/object-utils/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@createform/tsconfig/react-library.json", 3 | "include": ["."], 4 | "exclude": ["dist", "build", "node_modules"] 5 | } -------------------------------------------------------------------------------- /packages/validation/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@createform/tsconfig/react-library.json", 3 | "include": ["."], 4 | "exclude": ["dist", "build", "node_modules"] 5 | } -------------------------------------------------------------------------------- /packages/tsconfig/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@createform/tsconfig", 3 | "version": "4.0.7", 4 | "license": "MIT", 5 | "publishConfig": { 6 | "access": "public" 7 | } 8 | } -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /examples/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "jsx": "react" 4 | }, 5 | "extends": "@createform/tsconfig/vite.json", 6 | "include": ["."], 7 | "exclude": ["dist", "build", "node_modules"] 8 | } 9 | -------------------------------------------------------------------------------- /.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 -------------------------------------------------------------------------------- /examples/src/main.tsx: -------------------------------------------------------------------------------- 1 | import * as ReactDOM from "react-dom/client"; 2 | import { App } from "./app"; 3 | 4 | const root = ReactDOM.createRoot( 5 | document.getElementById("root") as HTMLElement 6 | ); 7 | root.render(); 8 | -------------------------------------------------------------------------------- /version.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@turbo-version/version/turbov.schema.json", 3 | "tagPrefix": "v", 4 | "preset": "angular", 5 | "synced": true, 6 | "updateInternalDependencies": "patch" 7 | } -------------------------------------------------------------------------------- /docs/app/routes.ts: -------------------------------------------------------------------------------- 1 | import { type RouteConfig, index, route } from '@react-router/dev/routes'; 2 | 3 | export default [ 4 | index('routes/home.tsx'), 5 | route('docs/*', 'docs/page.tsx'), 6 | route('api/search', 'docs/search.ts'), 7 | ] satisfies RouteConfig; 8 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /packages/object-utils/jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | preset: "ts-jest", 3 | testEnvironment: "jsdom", 4 | moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"], 5 | moduleNameMapper: { 6 | "\\.(css|less)$": "identity-obj-proxy", 7 | }, 8 | }; 9 | -------------------------------------------------------------------------------- /packages/validation/jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | preset: "ts-jest", 3 | testEnvironment: "jsdom", 4 | moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"], 5 | moduleNameMapper: { 6 | "\\.(css|less)$": "identity-obj-proxy", 7 | }, 8 | }; 9 | -------------------------------------------------------------------------------- /docs/app/routes/components/index.tsx: -------------------------------------------------------------------------------- 1 | import HeroContent from "./hero-content"; 2 | import Highlights from "./highlights"; 3 | 4 | export default function HomeContent() { 5 | return ( 6 | <> 7 | 8 | 9 | 10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /packages/tsconfig/node16.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://json.schemastore.org/tsconfig", 3 | "display": "Node 16", 4 | "extends": "./base.json", 5 | "compilerOptions": { 6 | "lib": ["ES2020"], 7 | "module": "commonjs", 8 | "target": "ES2020" 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /docs/react-router.config.ts: -------------------------------------------------------------------------------- 1 | import type { Config } from '@react-router/dev/config'; 2 | import { source } from './app/source'; 3 | 4 | export default { 5 | ssr: true, 6 | async prerender() { 7 | return [...source.getPages().map((page) => page.url)]; 8 | }, 9 | } satisfies Config; 10 | -------------------------------------------------------------------------------- /packages/eslint-config/index.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: ["next", "turbo", "prettier"], 3 | rules: { 4 | "@next/next/no-html-link-for-pages": "off", 5 | }, 6 | parserOptions: { 7 | babelOptions: { 8 | presets: [require.resolve("next/babel")], 9 | }, 10 | }, 11 | }; 12 | -------------------------------------------------------------------------------- /packages/react/jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | preset: 'ts-jest', 3 | testEnvironment: 'jsdom', 4 | moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'], 5 | moduleNameMapper: { 6 | '\\.(css|less)$': 'identity-obj-proxy' 7 | }, 8 | setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'] 9 | }; -------------------------------------------------------------------------------- /docs/content/docs/meta.json: -------------------------------------------------------------------------------- 1 | { 2 | "root": true, 3 | "pages": [ 4 | "index", 5 | "quick-start", 6 | "best-practices", 7 | "migration", 8 | "api-reference", 9 | "createform", 10 | "useform", 11 | "tutorials", 12 | "examples", 13 | "troubleshooting", 14 | "about" 15 | ], 16 | "defaultOpened": true 17 | } -------------------------------------------------------------------------------- /packages/tsconfig/react-library.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://json.schemastore.org/tsconfig", 3 | "display": "React Library", 4 | "extends": "./base.json", 5 | "compilerOptions": { 6 | "jsx": "react-jsx", 7 | "lib": [ 8 | "dom", 9 | "ES2015" 10 | ], 11 | "module": "ESNext", 12 | "target": "es6" 13 | } 14 | } -------------------------------------------------------------------------------- /docs/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { reactRouter } from '@react-router/dev/vite'; 2 | import tailwindcss from '@tailwindcss/vite'; 3 | import { defineConfig } from 'vite'; 4 | import tsconfigPaths from 'vite-tsconfig-paths'; 5 | 6 | export default defineConfig({ 7 | build: { 8 | rollupOptions: { 9 | external: ['shiki'], 10 | }, 11 | }, 12 | plugins: [tailwindcss(), reactRouter(), tsconfigPaths()], 13 | }); 14 | -------------------------------------------------------------------------------- /examples/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["plugin:@nrwl/nx/react", "../../.eslintrc.json"], 3 | "ignorePatterns": ["!**/*"], 4 | "overrides": [ 5 | { 6 | "files": ["*.ts", "*.tsx", "*.js", "*.jsx"], 7 | "rules": {} 8 | }, 9 | { 10 | "files": ["*.ts", "*.tsx"], 11 | "rules": {} 12 | }, 13 | { 14 | "files": ["*.js", "*.jsx"], 15 | "rules": {} 16 | } 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /packages/eslint-config/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "eslint-config-createform", 3 | "version": "4.0.7", 4 | "main": "index.js", 5 | "license": "MIT", 6 | "dependencies": { 7 | "eslint-config-next": "13.3.0", 8 | "eslint-config-prettier": "8.3.0", 9 | "eslint-plugin-react": "7.29.4", 10 | "eslint-config-turbo": "1.9.0", 11 | "eslint": "7.23.0", 12 | "typescript": "4.9.3" 13 | }, 14 | "publishConfig": { 15 | "access": "public" 16 | } 17 | } -------------------------------------------------------------------------------- /turbo.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://turbo.build/schema.json", 3 | "tasks": { 4 | "build": { 5 | "outputs": ["dist/**", "storybook-static/**"], 6 | "dependsOn": ["^build"] 7 | }, 8 | "test": { 9 | "outputs": ["coverage/**"], 10 | "dependsOn": [] 11 | }, 12 | "lint": {}, 13 | "dev": { 14 | "cache": false, 15 | "persistent": true 16 | }, 17 | "clean": { 18 | "cache": false 19 | } 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /examples/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Example 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /examples/src/App.tsx: -------------------------------------------------------------------------------- 1 | import { ChakraProvider } from "@chakra-ui/react"; 2 | import "react-datepicker/dist/react-datepicker.css"; 3 | import { FormExample } from "./Examples/createForm/form-example"; 4 | import { FormDataWay } from "./Examples/useForm/form-data"; 5 | import React from "react"; 6 | import { FormZodValidation } from "./Examples/createForm/zod-validation"; 7 | export function App() { 8 | return ( 9 | 10 | 11 | 12 | ); 13 | } 14 | -------------------------------------------------------------------------------- /packages/react/src/use-form/fields-utils.ts: -------------------------------------------------------------------------------- 1 | export function isRadioOrCheckbox(element: any) { 2 | return element.type === "radio" || element.type === "checkbox"; 3 | } 4 | 5 | export function isSelect(element: any) { 6 | return element.type === "select"; 7 | } 8 | 9 | export function setOptionAsDefault(element: HTMLSelectElement, value: any) { 10 | const index = Array.from(element.options).findIndex( 11 | (option) => option.value === value 12 | ); 13 | 14 | if (index !== -1) { 15 | element.options[index].defaultSelected = true; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /packages/tsconfig/vite.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./base.json", 3 | "compilerOptions": { 4 | "target": "ESNext", 5 | "useDefineForClassFields": true, 6 | "module": "ESNext", 7 | "lib": [ 8 | "ESNext", 9 | "DOM" 10 | ], 11 | "sourceMap": true, 12 | "resolveJsonModule": true, 13 | "noEmit": true, 14 | "noUnusedLocals": true, 15 | "noUnusedParameters": true, 16 | "noImplicitReturns": true 17 | }, 18 | "exclude": [ 19 | "node_modules" 20 | ] 21 | } -------------------------------------------------------------------------------- /packages/tsconfig/base.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://json.schemastore.org/tsconfig", 3 | "display": "Default", 4 | "compilerOptions": { 5 | "composite": false, 6 | "declaration": true, 7 | "declarationMap": true, 8 | "esModuleInterop": true, 9 | "forceConsistentCasingInFileNames": true, 10 | "inlineSources": false, 11 | "isolatedModules": true, 12 | "moduleResolution": "node", 13 | "noUnusedLocals": false, 14 | "noUnusedParameters": false, 15 | "preserveWatchOutput": true, 16 | "skipLibCheck": true, 17 | "strict": true 18 | }, 19 | "exclude": ["node_modules"] 20 | } 21 | -------------------------------------------------------------------------------- /docs/app/docs/search.ts: -------------------------------------------------------------------------------- 1 | import type { Route } from './+types/search'; 2 | import { createSearchAPI } from 'fumadocs-core/search/server'; 3 | import { source } from '@/source'; 4 | import { structure } from 'fumadocs-core/mdx-plugins'; 5 | 6 | const server = createSearchAPI('advanced', { 7 | indexes: source.getPages().map((page) => ({ 8 | id: page.url, 9 | url: page.url, 10 | title: page.data.title ?? '', 11 | description: page.data.description, 12 | structuredData: structure(page.data.content), 13 | })), 14 | }); 15 | 16 | export async function loader({ request }: Route.LoaderArgs) { 17 | return server.GET(request); 18 | } 19 | -------------------------------------------------------------------------------- /examples/vite.config.ts: -------------------------------------------------------------------------------- 1 | /// 2 | import { defineConfig } from "vite"; 3 | import react from "@vitejs/plugin-react"; 4 | import viteTsConfigPaths from "vite-tsconfig-paths"; 5 | 6 | export default defineConfig({ 7 | server: { 8 | port: 4200, 9 | host: "localhost", 10 | }, 11 | plugins: [ 12 | react(), 13 | // viteTsConfigPaths({ 14 | // root: "../../", 15 | // }), 16 | ], 17 | 18 | test: { 19 | globals: true, 20 | cache: { 21 | dir: "../../node_modules/.vitest", 22 | }, 23 | environment: "jsdom", 24 | include: ["src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}"], 25 | }, 26 | }); 27 | -------------------------------------------------------------------------------- /examples/src/Examples/createForm/MultiStep/use-person-form.ts: -------------------------------------------------------------------------------- 1 | import { createForm } from "@createform/react"; 2 | 3 | export type Person = { 4 | firstName: string; 5 | lastName: string; 6 | age: number | null; 7 | date: string; 8 | profession: any; 9 | address: { 10 | street: string; 11 | city: string; 12 | zipCode: string; 13 | }; 14 | }; 15 | 16 | export const usePersonForm = createForm({ 17 | initialValues: { 18 | firstName: "", 19 | lastName: "", 20 | date: "", 21 | age: null, 22 | profession: null, 23 | address: { 24 | street: "", 25 | city: "", 26 | zipCode: "", 27 | }, 28 | }, 29 | mode: "onChange", 30 | }); 31 | -------------------------------------------------------------------------------- /packages/tsconfig/next.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://json.schemastore.org/tsconfig", 3 | "display": "Next.js", 4 | "extends": "./base.json", 5 | "compilerOptions": { 6 | "target": "es5", 7 | "lib": ["dom", "dom.iterable", "esnext"], 8 | "allowJs": true, 9 | "skipLibCheck": true, 10 | "strict": false, 11 | "forceConsistentCasingInFileNames": true, 12 | "noEmit": true, 13 | "incremental": true, 14 | "esModuleInterop": true, 15 | "module": "esnext", 16 | "resolveJsonModule": true, 17 | "isolatedModules": true, 18 | "jsx": "preserve" 19 | }, 20 | "include": ["src", "next-env.d.ts"], 21 | "exclude": ["node_modules"] 22 | } -------------------------------------------------------------------------------- /docs/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": [ 3 | "**/*", 4 | "**/.server/**/*", 5 | "**/.client/**/*", 6 | ".react-router/types/**/*" 7 | ], 8 | "compilerOptions": { 9 | "lib": ["DOM", "DOM.Iterable", "ES2022"], 10 | "types": ["node", "vite/client"], 11 | "target": "esnext", 12 | "module": "esnext", 13 | "moduleResolution": "bundler", 14 | "jsx": "react-jsx", 15 | "rootDirs": [".", "./.react-router/types"], 16 | "baseUrl": ".", 17 | "paths": { 18 | "@/*": ["./app/*"] 19 | }, 20 | "esModuleInterop": true, 21 | "verbatimModuleSyntax": true, 22 | "noEmit": true, 23 | "resolveJsonModule": true, 24 | "skipLibCheck": true, 25 | "strict": true 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /examples/src/Examples/createForm/MultiStepWithYup/Form.tsx: -------------------------------------------------------------------------------- 1 | import { Person, usePersonForm } from "./use-person-form"; 2 | import { Wizard } from "react-use-wizard"; 3 | import { BasicInfoStep } from "./basic-info-step"; 4 | import { AddressStep } from "./address-step"; 5 | import React from "react"; 6 | 7 | export function MultiFormWithYup() { 8 | const form = usePersonForm(); 9 | 10 | function handleSubmit(e: Person) { 11 | console.log(e); 12 | } 13 | 14 | function handleReset(e: Person) { } 15 | 16 | console.log(form.state.errors); 17 | 18 | return ( 19 |
23 | 24 | 25 | 26 | 27 |
28 | ); 29 | } 30 | -------------------------------------------------------------------------------- /docs/app/routes/home.tsx: -------------------------------------------------------------------------------- 1 | import type { Route } from "./+types/home"; 2 | import { HomeLayout } from "fumadocs-ui/layouts/home"; 3 | import HomeContent from "./components"; 4 | 5 | export function meta({ }: Route.MetaArgs) { 6 | return [ 7 | { title: "CreateForm" }, 8 | { 9 | name: "description", 10 | content: 11 | "The ReactJS form library", 12 | }, 13 | ]; 14 | } 15 | 16 | export default function Home() { 17 | return ( 18 | 22 | Createform 23 | 24 | ), 25 | }} 26 | > 27 |
28 | 29 |
30 | 31 | ); 32 | } 33 | -------------------------------------------------------------------------------- /docs/app/demos/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 |