From 3c1ed0b38f15ef115e2c0aae1299f3366cc94d72 Mon Sep 17 00:00:00 2001 From: Malte Hecht Date: Tue, 7 Jun 2022 17:48:07 +0200 Subject: [PATCH 01/66] Update README.md improve readability --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index c8f4a0b..3729dde 100644 --- a/README.md +++ b/README.md @@ -25,7 +25,7 @@ You can choose your `SnoopElements` from a wide range of pre-coded components, i From 628b824809435b88dea49865faa738f8fbaca9db Mon Sep 17 00:00:00 2001 From: knugget Date: Tue, 7 Jun 2022 12:30:46 -0500 Subject: [PATCH 02/66] =?UTF-8?q?=F0=9F=A4=93=20Readbility=20Update?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 3729dde..ea5a1ac 100644 --- a/README.md +++ b/README.md @@ -14,10 +14,15 @@ React Library with form- & survey-elements for the snoopForms platform npm install @snoopforms/react ``` -## How to use +## How to use it 🤓 -Use the SnoopForm components to build your form easily. Use the `SnoopForm` wrapper to make the connection to the SnoopForm Data-Platform. Use `SnoopPage` to tell the Form where you need an new page. The SnoopForms library will only show the current page to the user. That way you can build long, more complex forms or a Typeform-like form-view, where you change the page after every question. -You can choose your `SnoopElements` from a wide range of pre-coded components, including text, email, checkboxes, radio-buttons, color-pickers, and many more. +Use the SnoopForm components to build your form easily. + + `SnoopForm:` Use the `SnoopForm` wrapper to make the connection to the SnoopForm Data-Platform. + `SnoopPage:` Use `SnoopPage` to tell the Form where you need an new page. The SnoopForms library will only show the current page to the user. That way you can build long, more complex forms or a Typeform-like form-view, where the page changes after every question. + `SnoopElements:` You can choose your `SnoopElements` from a wide range of pre-coded components, including text, email, checkboxes, radio-buttons, color-pickers, and many more. + +## Example ```jsx @@ -34,6 +39,6 @@ You can choose your `SnoopElements` from a wide range of pre-coded components, i ``` -## Contributing +## Contribute 🙏 Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are **greatly appreciated**. From db8845bc50efb98883c3ccc90de6be074aa06c41 Mon Sep 17 00:00:00 2001 From: knugget Date: Tue, 7 Jun 2022 12:32:32 -0500 Subject: [PATCH 03/66] =?UTF-8?q?=20=F0=9F=A4=93=20Readbility=20Update?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index ea5a1ac..a313da9 100644 --- a/README.md +++ b/README.md @@ -18,9 +18,9 @@ npm install @snoopforms/react Use the SnoopForm components to build your form easily. - `SnoopForm:` Use the `SnoopForm` wrapper to make the connection to the SnoopForm Data-Platform. - `SnoopPage:` Use `SnoopPage` to tell the Form where you need an new page. The SnoopForms library will only show the current page to the user. That way you can build long, more complex forms or a Typeform-like form-view, where the page changes after every question. - `SnoopElements:` You can choose your `SnoopElements` from a wide range of pre-coded components, including text, email, checkboxes, radio-buttons, color-pickers, and many more. +- `SnoopForm:` Use the `SnoopForm` wrapper to make the connection to the SnoopForm Data-Platform. +- `SnoopPage:` Use `SnoopPage` to tell the Form where you need an new page. The SnoopForms library will only show the current page to the user. That way you can build long, more complex forms or a Typeform-like form-view, where the page changes after every question. +- `SnoopElements:` You can choose your `SnoopElements` from a wide range of pre-coded components, including text, email, checkboxes, radio-buttons, color-pickers, and many more. ## Example From c7ccae40d5f5a8d9d8f8606d1fb0e42af78bbf0c Mon Sep 17 00:00:00 2001 From: Matthias Nannt Date: Thu, 9 Jun 2022 00:30:35 +0900 Subject: [PATCH 04/66] feat: add checkbox, outsource ClassNames type to new types file --- .github/workflows/test.yml | 5 +- README.md | 2 +- src/components/Elements/Checkbox.tsx | 84 ++++++++++++++++++++ src/components/Elements/Radio.tsx | 35 +++----- src/components/Elements/Submit.tsx | 7 +- src/components/Elements/Text.tsx | 6 +- src/components/Elements/Textarea.tsx | 6 +- src/components/SnoopElement/SnoopElement.tsx | 23 ++++-- src/components/SnoopForm/SnoopForm.tsx | 2 +- src/types.ts | 8 ++ 10 files changed, 130 insertions(+), 48 deletions(-) create mode 100644 src/components/Elements/Checkbox.tsx create mode 100644 src/types.ts diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index 20ed14e..51a98f9 100644 --- a/.github/workflows/test.yml +++ b/.github/workflows/test.yml @@ -1,6 +1,9 @@ name: Test -on: push +on: + push: + tags-ignore: + - "**" jobs: test: diff --git a/README.md b/README.md index c8f4a0b..f51e12e 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ React Library with form- & survey-elements for the snoopForms platform -[![npm package](https://img.shields.io/badge/npm%20i-@snoopforms/react)](https://www.npmjs.com/package/@snoopforms/react) [![version number](https://img.shields.io/npm/v/@snoopforms/react?color=green&label=version)](https://github.com/snoopforms/snoopforms-react/releases) [![Actions Status](https://github.com/snoopForms/snoopforms-react/workflows/Test/badge.svg)](https://github.com/snoopForms/snoopforms-react/actions) [![License](https://img.shields.io/github/license/snoopforms/snoopforms-react)](https://github.com/snoopForms/snoopforms-react/blob/main/LICENSE) +[![npm package](https://img.shields.io/badge/npm%20i-@snoopforms/react)](https://www.npmjs.com/package/@snoopforms/react) [![version number](https://img.shields.io/npm/v/@snoopforms/react?color=green&label=version)](https://github.com/snoopforms/react/releases) [![Actions Status](https://github.com/snoopForms/snoopforms-react/workflows/Test/badge.svg)](https://github.com/snoopForms/snoopforms-react/actions) [![License](https://img.shields.io/github/license/snoopforms/snoopforms-react)](https://github.com/snoopForms/snoopforms-react/blob/main/LICENSE)
diff --git a/src/components/Elements/Checkbox.tsx b/src/components/Elements/Checkbox.tsx new file mode 100644 index 0000000..321be32 --- /dev/null +++ b/src/components/Elements/Checkbox.tsx @@ -0,0 +1,84 @@ +import { RadioGroup } from "@headlessui/react"; +import React, { FC, useContext, useState } from "react"; +import { setSubmissionValue } from "../../lib/elements"; +import { SubmissionContext } from "../SnoopForm/SnoopForm"; +import { PageContext } from "../SnoopPage/SnoopPage"; +import { ClassNames } from "../../types"; + +interface Option { + label: string; + value: string; +} + +interface Props { + name: string; + options: Option[] | string[]; + placeholder?: string; + classNames: ClassNames; + required: boolean; +} + +export const Checkbox: FC = ({ + name, + options, + classNames, + required, +}) => { + const [checked, setChecked] = useState([]); + const { submission, setSubmission }: any = useContext(SubmissionContext); + const pageName = useContext(PageContext); + + return ( +
+ {options.map((option) => ( +
+
+ { + const newChecked: string[] = [...checked]; + const value = + typeof option === "object" ? option.value : option; + if (e.target.checked) { + newChecked.push(value); + } else { + const idx = newChecked.findIndex((v) => v === value); + if (idx >= 0) { + newChecked.splice(idx, 1); + } + } + setChecked(newChecked); + setSubmissionValue( + newChecked, + pageName, + name, + submission, + setSubmission + ); + }} + /> +
+
+ +
+
+ ))} +
+ ); +}; diff --git a/src/components/Elements/Radio.tsx b/src/components/Elements/Radio.tsx index 53a7b6e..6bcb38c 100644 --- a/src/components/Elements/Radio.tsx +++ b/src/components/Elements/Radio.tsx @@ -3,13 +3,7 @@ import React, { FC, useContext, useState } from "react"; import { setSubmissionValue } from "../../lib/elements"; import { SubmissionContext } from "../SnoopForm/SnoopForm"; import { PageContext } from "../SnoopPage/SnoopPage"; - -interface ClassNames { - label?: string; - element?: string; - radioOption?: string | ((bag: any) => string) | undefined; - radioGroup?: string; -} +import { ClassNames } from "../../types"; interface Option { label: string; @@ -36,22 +30,17 @@ export const Radio: FC = ({ name, options, classNames, required }) => { } className={classNames.radioGroup} > - {/* - Choose an option - */} -
- {options.map((option) => ( - - - {typeof option === "object" ? option.label : option} - - - ))} -
+ {options.map((option) => ( + + + {typeof option === "object" ? option.label : option} + + + ))} ); diff --git a/src/components/Elements/Submit.tsx b/src/components/Elements/Submit.tsx index 5cb56af..0a03a1a 100644 --- a/src/components/Elements/Submit.tsx +++ b/src/components/Elements/Submit.tsx @@ -1,11 +1,6 @@ import React, { FC, useContext } from "react"; import { SubmissionContext } from "../SnoopForm/SnoopForm"; - -interface ClassNames { - label?: string; - element?: string; - button?: string; -} +import { ClassNames } from "../../types"; interface Props { label?: string; diff --git a/src/components/Elements/Text.tsx b/src/components/Elements/Text.tsx index 80a2f84..99820b2 100644 --- a/src/components/Elements/Text.tsx +++ b/src/components/Elements/Text.tsx @@ -2,11 +2,7 @@ import React, { FC, useContext } from "react"; import { setSubmissionValue } from "../../lib/elements"; import { SubmissionContext } from "../SnoopForm/SnoopForm"; import { PageContext } from "../SnoopPage/SnoopPage"; - -interface ClassNames { - label?: string; - element?: string; -} +import { ClassNames } from "../../types"; interface Props { name: string; diff --git a/src/components/Elements/Textarea.tsx b/src/components/Elements/Textarea.tsx index d1a6593..cb1239f 100644 --- a/src/components/Elements/Textarea.tsx +++ b/src/components/Elements/Textarea.tsx @@ -2,11 +2,7 @@ import React, { FC, useContext } from "react"; import { setSubmissionValue } from "../../lib/elements"; import { SubmissionContext } from "../SnoopForm/SnoopForm"; import { PageContext } from "../SnoopPage/SnoopPage"; - -interface ClassNames { - label?: string; - element?: string; -} +import { ClassNames } from "../../types"; interface Props { name: string; diff --git a/src/components/SnoopElement/SnoopElement.tsx b/src/components/SnoopElement/SnoopElement.tsx index bcc75c0..61805a3 100644 --- a/src/components/SnoopElement/SnoopElement.tsx +++ b/src/components/SnoopElement/SnoopElement.tsx @@ -5,17 +5,14 @@ import { Text } from "../Elements/Text"; import { Radio } from "../Elements/Radio"; import { Textarea } from "../Elements/Textarea"; import { Submit } from "../Elements/Submit"; +import { Checkbox } from "../Elements/Checkbox"; +import { ClassNames } from "../../types"; interface Option { label: string; value: string; } -interface ClassNames { - label?: string; - element?: string; -} - interface Props { type: string; name: string; @@ -69,7 +66,21 @@ export const SnoopElement: FC = ({ return (
- {type === "radio" ? ( + {type === "checkbox" ? ( + <> + {label && ( + + )} + + + ) : type === "radio" ? ( <> {label && (
); diff --git a/src/components/Elements/Submit.tsx b/src/components/Elements/Submit.tsx index 5cb56af..0a03a1a 100644 --- a/src/components/Elements/Submit.tsx +++ b/src/components/Elements/Submit.tsx @@ -1,11 +1,6 @@ import React, { FC, useContext } from "react"; import { SubmissionContext } from "../SnoopForm/SnoopForm"; - -interface ClassNames { - label?: string; - element?: string; - button?: string; -} +import { ClassNames } from "../../types"; interface Props { label?: string; diff --git a/src/components/Elements/Text.tsx b/src/components/Elements/Text.tsx index 80a2f84..99820b2 100644 --- a/src/components/Elements/Text.tsx +++ b/src/components/Elements/Text.tsx @@ -2,11 +2,7 @@ import React, { FC, useContext } from "react"; import { setSubmissionValue } from "../../lib/elements"; import { SubmissionContext } from "../SnoopForm/SnoopForm"; import { PageContext } from "../SnoopPage/SnoopPage"; - -interface ClassNames { - label?: string; - element?: string; -} +import { ClassNames } from "../../types"; interface Props { name: string; diff --git a/src/components/Elements/Textarea.tsx b/src/components/Elements/Textarea.tsx index d1a6593..cb1239f 100644 --- a/src/components/Elements/Textarea.tsx +++ b/src/components/Elements/Textarea.tsx @@ -2,11 +2,7 @@ import React, { FC, useContext } from "react"; import { setSubmissionValue } from "../../lib/elements"; import { SubmissionContext } from "../SnoopForm/SnoopForm"; import { PageContext } from "../SnoopPage/SnoopPage"; - -interface ClassNames { - label?: string; - element?: string; -} +import { ClassNames } from "../../types"; interface Props { name: string; diff --git a/src/components/SnoopElement/SnoopElement.tsx b/src/components/SnoopElement/SnoopElement.tsx index bcc75c0..61805a3 100644 --- a/src/components/SnoopElement/SnoopElement.tsx +++ b/src/components/SnoopElement/SnoopElement.tsx @@ -5,17 +5,14 @@ import { Text } from "../Elements/Text"; import { Radio } from "../Elements/Radio"; import { Textarea } from "../Elements/Textarea"; import { Submit } from "../Elements/Submit"; +import { Checkbox } from "../Elements/Checkbox"; +import { ClassNames } from "../../types"; interface Option { label: string; value: string; } -interface ClassNames { - label?: string; - element?: string; -} - interface Props { type: string; name: string; @@ -69,7 +66,21 @@ export const SnoopElement: FC = ({ return (
- {type === "radio" ? ( + {type === "checkbox" ? ( + <> + {label && ( + + )} + + + ) : type === "radio" ? ( <> {label && (