mirror/formbricks
1
0
Fork 0
mirror of https://github.com/formbricks/formbricks.git synced 2026-01-25 18:48:58 -06:00
Code Issues Packages Projects Releases 119 Wiki Activity

add simple validation and minLength & maxLength to react lib

Browse Source
This commit is contained in:
Matthias Nannt
2022-11-16 10:57:57 +01:00
parent 329ea10de8
commit 933be017df
7 changed files with 73 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/hip-flies-double.md Normal file
View File

@@ -0,0 +1,5 @@
---
"@formbricks/react": patch
---
add simple validation, add minLength & maxLength to Text & Textarea

56
apps/formbricks-com/public/sitemap-0.xml
View File

@@ -1,31 +1,31 @@
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
<url><loc>https://formbricks.com</loc><lastmod>2022-11-15T15:36:06.732Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://formbricks.com/blog</loc><lastmod>2022-11-15T15:36:06.732Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://formbricks.com/blog/open-source-forms-will-save-the-world</loc><lastmod>2022-11-15T15:36:06.732Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://formbricks.com/blog/snoopforms-becomes-formbricks</loc><lastmod>2022-11-15T15:36:06.732Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://formbricks.com/blog/why-open-source-no-code-is-the-future-of-enterprise-gov-software</loc><lastmod>2022-11-15T15:36:06.732Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://formbricks.com/community</loc><lastmod>2022-11-15T15:36:06.732Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://formbricks.com/core-api</loc><lastmod>2022-11-15T15:36:06.732Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://formbricks.com/docs</loc><lastmod>2022-11-15T15:36:06.732Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://formbricks.com/docs/data-insights/form-hq</loc><lastmod>2022-11-15T15:36:06.732Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://formbricks.com/docs/data-pipelines/core-api</loc><lastmod>2022-11-15T15:36:06.732Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://formbricks.com/docs/data-pipelines/email-notifications</loc><lastmod>2022-11-15T15:36:06.732Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://formbricks.com/docs/data-pipelines/webhooks</loc><lastmod>2022-11-15T15:36:06.732Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://formbricks.com/docs/introduction/how-to-achieve-this</loc><lastmod>2022-11-15T15:36:06.732Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://formbricks.com/docs/introduction/quick-start</loc><lastmod>2022-11-15T15:36:06.732Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://formbricks.com/docs/introduction/what-is-formbricks</loc><lastmod>2022-11-15T15:36:06.732Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://formbricks.com/docs/introduction/why-formbricks</loc><lastmod>2022-11-15T15:36:06.732Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://formbricks.com/docs/react-form-library/getting-started</loc><lastmod>2022-11-15T15:36:06.732Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://formbricks.com/docs/react-form-library/introduction</loc><lastmod>2022-11-15T15:36:06.732Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://formbricks.com/email</loc><lastmod>2022-11-15T15:36:06.732Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://formbricks.com/form-hq</loc><lastmod>2022-11-15T15:36:06.732Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://formbricks.com/get-started</loc><lastmod>2022-11-15T15:36:06.732Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://formbricks.com/imprint</loc><lastmod>2022-11-15T15:36:06.732Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://formbricks.com/privacy</loc><lastmod>2022-11-15T15:36:06.732Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://formbricks.com/react-form-library</loc><lastmod>2022-11-15T15:36:06.732Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://formbricks.com/visual-builder</loc><lastmod>2022-11-15T15:36:06.732Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://formbricks.com/vs-formspree</loc><lastmod>2022-11-15T15:36:06.732Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://formbricks.com/vs-react-hook-form</loc><lastmod>2022-11-15T15:36:06.732Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://formbricks.com/webhooks</loc><lastmod>2022-11-15T15:36:06.732Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://formbricks.com</loc><lastmod>2022-11-16T09:56:29.421Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://formbricks.com/blog</loc><lastmod>2022-11-16T09:56:29.421Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://formbricks.com/blog/open-source-forms-will-save-the-world</loc><lastmod>2022-11-16T09:56:29.421Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://formbricks.com/blog/snoopforms-becomes-formbricks</loc><lastmod>2022-11-16T09:56:29.421Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://formbricks.com/blog/why-open-source-no-code-is-the-future-of-enterprise-gov-software</loc><lastmod>2022-11-16T09:56:29.421Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://formbricks.com/community</loc><lastmod>2022-11-16T09:56:29.421Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://formbricks.com/core-api</loc><lastmod>2022-11-16T09:56:29.421Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://formbricks.com/docs</loc><lastmod>2022-11-16T09:56:29.421Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://formbricks.com/docs/data-insights/form-hq</loc><lastmod>2022-11-16T09:56:29.421Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://formbricks.com/docs/data-pipelines/core-api</loc><lastmod>2022-11-16T09:56:29.421Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://formbricks.com/docs/data-pipelines/email-notifications</loc><lastmod>2022-11-16T09:56:29.421Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://formbricks.com/docs/data-pipelines/webhooks</loc><lastmod>2022-11-16T09:56:29.421Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://formbricks.com/docs/introduction/how-to-achieve-this</loc><lastmod>2022-11-16T09:56:29.421Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://formbricks.com/docs/introduction/quick-start</loc><lastmod>2022-11-16T09:56:29.421Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://formbricks.com/docs/introduction/what-is-formbricks</loc><lastmod>2022-11-16T09:56:29.421Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://formbricks.com/docs/introduction/why-formbricks</loc><lastmod>2022-11-16T09:56:29.421Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://formbricks.com/docs/react-form-library/getting-started</loc><lastmod>2022-11-16T09:56:29.421Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://formbricks.com/docs/react-form-library/introduction</loc><lastmod>2022-11-16T09:56:29.421Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://formbricks.com/email</loc><lastmod>2022-11-16T09:56:29.421Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://formbricks.com/form-hq</loc><lastmod>2022-11-16T09:56:29.421Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://formbricks.com/get-started</loc><lastmod>2022-11-16T09:56:29.421Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://formbricks.com/imprint</loc><lastmod>2022-11-16T09:56:29.421Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://formbricks.com/privacy</loc><lastmod>2022-11-16T09:56:29.421Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://formbricks.com/react-form-library</loc><lastmod>2022-11-16T09:56:29.421Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://formbricks.com/visual-builder</loc><lastmod>2022-11-16T09:56:29.421Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://formbricks.com/vs-formspree</loc><lastmod>2022-11-16T09:56:29.421Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://formbricks.com/vs-react-hook-form</loc><lastmod>2022-11-16T09:56:29.421Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
<url><loc>https://formbricks.com/webhooks</loc><lastmod>2022-11-16T09:56:29.421Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
</urlset>

2
packages/react/package.json
View File

@@ -1,6 +1,6 @@
{
"name": "@formbricks/react",
"version": "0.0.1",
"version": "0.0.2",
"author": "Formbricks <hola@formbricks.com>",
"description": "Building React forms has never been quicker.",
"homepage": "https://formbricks.com",

18
packages/react/src/components/Formbricks.tsx
View File

@@ -3,11 +3,11 @@ import { generateId } from "../lib/utils";
import { getValidationRules } from "../lib/validation";
import { SchemaContext } from "./Form";
import { Text, TextInputUniqueProps } from "./inputs/Text";
import { Textarea } from "./inputs/Textarea";
import { Textarea, TextareaInputUniqueProps } from "./inputs/Textarea";
import { Help } from "./shared/Help";
interface FormbricksInputProps {
type: "text" | "textarea";
interface TypeProps {
type: "text" | "textarea" | "submit";
}
interface SubmitTypeProps {
@@ -15,7 +15,6 @@ interface SubmitTypeProps {
name?: string;
label?: string;
placeholder?: string;
type: "submit";
help?: string;
validation?: string;
}
@@ -23,13 +22,13 @@ interface SubmitTypeProps {
export interface UniversalInputProps {
id?: string;
help?: string;
name: string;
name?: string;
label?: string;
elemId: string;
validation: string[];
validation?: string;
}
type FormbricksProps = FormbricksInputProps & UniversalInputProps & SubmitTypeProps & TextInputUniqueProps;
type FormbricksProps = TextInputUniqueProps & TextareaInputUniqueProps & SubmitTypeProps & TypeProps;
export function Formbricks({
id,
@@ -44,7 +43,6 @@ export function Formbricks({
}: FormbricksProps) {
const elemId = useMemo(() => (typeof id !== "undefined" ? id : `${name}=${generateId(3)}`), [id]);
const { setSchema } = useContext(SchemaContext);
const validationRules = getValidationRules(validation);
useEffect(() => {
setSchema((schema: any) => {
@@ -80,7 +78,7 @@ export function Formbricks({
label={label}
elemId={elemId}
placeholder={placeholder}
validation={validationRules}
validation={validation}
minLength={minLength}
maxLength={maxLength}
/>
@@ -90,7 +88,7 @@ export function Formbricks({
label={label}
elemId={elemId}
placeholder={placeholder}
validation={validationRules}
validation={validation}
minLength={minLength}
maxLength={maxLength}
/>

16
packages/react/src/components/inputs/Text.tsx
View File

@@ -1,12 +1,13 @@
import React from "react";
import { useFormContext } from "react-hook-form";
import { getValidationRules } from "../../lib/validation";
import { UniversalInputProps } from "../Formbricks";
import { Label } from "../shared/Label";
export interface TextInputUniqueProps {
maxLength: number;
minLength: number;
placeholder: string;
maxLength?: number;
minLength?: number;
placeholder?: string;
}
type TextProps = UniversalInputProps & TextInputUniqueProps;
@@ -21,6 +22,13 @@ export function Text({
maxLength = 524288,
}: TextProps) {
const { register } = useFormContext();
const validationRules = getValidationRules(validation);
if (!name) {
console.error("🧱 Fomrbricks Error: Textarea has no name attribute");
return <div></div>;
}
return (
<>
<Label label={label} elemId={elemId} />
@@ -30,7 +38,7 @@ export function Text({
type="text"
id={elemId}
placeholder={placeholder || ""}
{...(register(name), { required: validation?.includes("required"), minLength, maxLength })}
{...register(name, { required: validationRules?.includes("required"), minLength, maxLength })}
/>
</div>
</>

24
packages/react/src/components/inputs/Textarea.tsx
View File

@@ -1,15 +1,16 @@
import React from "react";
import { useFormContext } from "react-hook-form";
import { getValidationRules } from "../../lib/validation";
import { UniversalInputProps } from "../Formbricks";
import { Label } from "../shared/Label";
export interface TextInputUniqueProps {
maxLength: number;
minLength: number;
placeholder: string;
export interface TextareaInputUniqueProps {
maxLength?: number;
minLength?: number;
placeholder?: string;
}
type TextareaProps = UniversalInputProps & TextInputUniqueProps;
type TextareaProps = UniversalInputProps & TextareaInputUniqueProps;
export function Textarea({
name,
@@ -21,6 +22,13 @@ export function Textarea({
maxLength = 524288,
}: TextareaProps) {
const { register } = useFormContext();
const validationRules = getValidationRules(validation);
if (!name) {
console.error("🧱 Fomrbricks Error: Textarea has no name attribute");
return <div></div>;
}
return (
<>
<Label label={label} elemId={elemId} />
@@ -29,7 +37,11 @@ export function Textarea({
className="formbricks-input"
id={elemId}
placeholder={placeholder || ""}
{...(register(name), { required: validation?.includes("required"), minLength, maxLength })}
{...register(name, {
required: validationRules?.includes("required"),
minLength,
maxLength,
})}
/>
</div>
</>

2
packages/react/src/lib/validation.ts
View File

@@ -1,4 +1,4 @@
export const getValidationRules = (validation: string) => {
export const getValidationRules = (validation: string | undefined) => {
const validationRules: string[] = [];
if (!validation) {
return validationRules;