From 933be017df42ae105338338efd544f429a8641f8 Mon Sep 17 00:00:00 2001 From: Matthias Nannt Date: Wed, 16 Nov 2022 10:57:57 +0100 Subject: [PATCH] add simple validation and minLength & maxLength to react lib --- .changeset/hip-flies-double.md | 5 ++ apps/formbricks-com/public/sitemap-0.xml | 56 +++++++++---------- packages/react/package.json | 2 +- packages/react/src/components/Formbricks.tsx | 18 +++--- packages/react/src/components/inputs/Text.tsx | 16 ++++-- .../react/src/components/inputs/Textarea.tsx | 24 ++++++-- packages/react/src/lib/validation.ts | 2 +- 7 files changed, 73 insertions(+), 50 deletions(-) create mode 100644 .changeset/hip-flies-double.md diff --git a/.changeset/hip-flies-double.md b/.changeset/hip-flies-double.md new file mode 100644 index 0000000000..47b337aa8e --- /dev/null +++ b/.changeset/hip-flies-double.md @@ -0,0 +1,5 @@ +--- +"@formbricks/react": patch +--- + +add simple validation, add minLength & maxLength to Text & Textarea diff --git a/apps/formbricks-com/public/sitemap-0.xml b/apps/formbricks-com/public/sitemap-0.xml index bcba7e78c5..c88512c87a 100644 --- a/apps/formbricks-com/public/sitemap-0.xml +++ b/apps/formbricks-com/public/sitemap-0.xml @@ -1,31 +1,31 @@ -https://formbricks.com2022-11-15T15:36:06.732Zdaily0.7 -https://formbricks.com/blog2022-11-15T15:36:06.732Zdaily0.7 -https://formbricks.com/blog/open-source-forms-will-save-the-world2022-11-15T15:36:06.732Zdaily0.7 -https://formbricks.com/blog/snoopforms-becomes-formbricks2022-11-15T15:36:06.732Zdaily0.7 -https://formbricks.com/blog/why-open-source-no-code-is-the-future-of-enterprise-gov-software2022-11-15T15:36:06.732Zdaily0.7 -https://formbricks.com/community2022-11-15T15:36:06.732Zdaily0.7 -https://formbricks.com/core-api2022-11-15T15:36:06.732Zdaily0.7 -https://formbricks.com/docs2022-11-15T15:36:06.732Zdaily0.7 -https://formbricks.com/docs/data-insights/form-hq2022-11-15T15:36:06.732Zdaily0.7 -https://formbricks.com/docs/data-pipelines/core-api2022-11-15T15:36:06.732Zdaily0.7 -https://formbricks.com/docs/data-pipelines/email-notifications2022-11-15T15:36:06.732Zdaily0.7 -https://formbricks.com/docs/data-pipelines/webhooks2022-11-15T15:36:06.732Zdaily0.7 -https://formbricks.com/docs/introduction/how-to-achieve-this2022-11-15T15:36:06.732Zdaily0.7 -https://formbricks.com/docs/introduction/quick-start2022-11-15T15:36:06.732Zdaily0.7 -https://formbricks.com/docs/introduction/what-is-formbricks2022-11-15T15:36:06.732Zdaily0.7 -https://formbricks.com/docs/introduction/why-formbricks2022-11-15T15:36:06.732Zdaily0.7 -https://formbricks.com/docs/react-form-library/getting-started2022-11-15T15:36:06.732Zdaily0.7 -https://formbricks.com/docs/react-form-library/introduction2022-11-15T15:36:06.732Zdaily0.7 -https://formbricks.com/email2022-11-15T15:36:06.732Zdaily0.7 -https://formbricks.com/form-hq2022-11-15T15:36:06.732Zdaily0.7 -https://formbricks.com/get-started2022-11-15T15:36:06.732Zdaily0.7 -https://formbricks.com/imprint2022-11-15T15:36:06.732Zdaily0.7 -https://formbricks.com/privacy2022-11-15T15:36:06.732Zdaily0.7 -https://formbricks.com/react-form-library2022-11-15T15:36:06.732Zdaily0.7 -https://formbricks.com/visual-builder2022-11-15T15:36:06.732Zdaily0.7 -https://formbricks.com/vs-formspree2022-11-15T15:36:06.732Zdaily0.7 -https://formbricks.com/vs-react-hook-form2022-11-15T15:36:06.732Zdaily0.7 -https://formbricks.com/webhooks2022-11-15T15:36:06.732Zdaily0.7 +https://formbricks.com2022-11-16T09:56:29.421Zdaily0.7 +https://formbricks.com/blog2022-11-16T09:56:29.421Zdaily0.7 +https://formbricks.com/blog/open-source-forms-will-save-the-world2022-11-16T09:56:29.421Zdaily0.7 +https://formbricks.com/blog/snoopforms-becomes-formbricks2022-11-16T09:56:29.421Zdaily0.7 +https://formbricks.com/blog/why-open-source-no-code-is-the-future-of-enterprise-gov-software2022-11-16T09:56:29.421Zdaily0.7 +https://formbricks.com/community2022-11-16T09:56:29.421Zdaily0.7 +https://formbricks.com/core-api2022-11-16T09:56:29.421Zdaily0.7 +https://formbricks.com/docs2022-11-16T09:56:29.421Zdaily0.7 +https://formbricks.com/docs/data-insights/form-hq2022-11-16T09:56:29.421Zdaily0.7 +https://formbricks.com/docs/data-pipelines/core-api2022-11-16T09:56:29.421Zdaily0.7 +https://formbricks.com/docs/data-pipelines/email-notifications2022-11-16T09:56:29.421Zdaily0.7 +https://formbricks.com/docs/data-pipelines/webhooks2022-11-16T09:56:29.421Zdaily0.7 +https://formbricks.com/docs/introduction/how-to-achieve-this2022-11-16T09:56:29.421Zdaily0.7 +https://formbricks.com/docs/introduction/quick-start2022-11-16T09:56:29.421Zdaily0.7 +https://formbricks.com/docs/introduction/what-is-formbricks2022-11-16T09:56:29.421Zdaily0.7 +https://formbricks.com/docs/introduction/why-formbricks2022-11-16T09:56:29.421Zdaily0.7 +https://formbricks.com/docs/react-form-library/getting-started2022-11-16T09:56:29.421Zdaily0.7 +https://formbricks.com/docs/react-form-library/introduction2022-11-16T09:56:29.421Zdaily0.7 +https://formbricks.com/email2022-11-16T09:56:29.421Zdaily0.7 +https://formbricks.com/form-hq2022-11-16T09:56:29.421Zdaily0.7 +https://formbricks.com/get-started2022-11-16T09:56:29.421Zdaily0.7 +https://formbricks.com/imprint2022-11-16T09:56:29.421Zdaily0.7 +https://formbricks.com/privacy2022-11-16T09:56:29.421Zdaily0.7 +https://formbricks.com/react-form-library2022-11-16T09:56:29.421Zdaily0.7 +https://formbricks.com/visual-builder2022-11-16T09:56:29.421Zdaily0.7 +https://formbricks.com/vs-formspree2022-11-16T09:56:29.421Zdaily0.7 +https://formbricks.com/vs-react-hook-form2022-11-16T09:56:29.421Zdaily0.7 +https://formbricks.com/webhooks2022-11-16T09:56:29.421Zdaily0.7 \ No newline at end of file diff --git a/packages/react/package.json b/packages/react/package.json index 5e07ca6b91..d74d09f14d 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -1,6 +1,6 @@ { "name": "@formbricks/react", - "version": "0.0.1", + "version": "0.0.2", "author": "Formbricks ", "description": "Building React forms has never been quicker.", "homepage": "https://formbricks.com", diff --git a/packages/react/src/components/Formbricks.tsx b/packages/react/src/components/Formbricks.tsx index 40a34b0203..36910f99bd 100644 --- a/packages/react/src/components/Formbricks.tsx +++ b/packages/react/src/components/Formbricks.tsx @@ -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} /> diff --git a/packages/react/src/components/inputs/Text.tsx b/packages/react/src/components/inputs/Text.tsx index d7949800ef..9fa68ca501 100644 --- a/packages/react/src/components/inputs/Text.tsx +++ b/packages/react/src/components/inputs/Text.tsx @@ -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
; + } + return ( <>