From 56c4f5f2ded3221e861b16c0779366a81a86d310 Mon Sep 17 00:00:00 2001
From: Hongbo Wu <hongbo@omnivore.app>
Date: Wed, 1 Jun 2022 22:04:58 +0800
Subject: [PATCH] Add formModal

---
 .../web/components/patterns/FormModal.tsx     | 70 +++++++++++++++++++
 1 file changed, 70 insertions(+)
 create mode 100644 packages/web/components/patterns/FormModal.tsx

diff --git a/packages/web/components/patterns/FormModal.tsx b/packages/web/components/patterns/FormModal.tsx
new file mode 100644
index 000000000..ab7f5b6d4
--- /dev/null
+++ b/packages/web/components/patterns/FormModal.tsx
@@ -0,0 +1,70 @@
+import {
+  ModalContent,
+  ModalOverlay,
+  ModalRoot,
+} from '../elements/ModalPrimitives'
+import { Box, HStack, VStack } from '../elements/LayoutPrimitives'
+import { Button } from '../elements/Button'
+import { StyledText } from '../elements/StyledText'
+import { FormInput } from '../elements/FormElements'
+
+interface FormInputProps {
+  name: string
+  label: string
+  value?: string
+  onChange: (value: string) => void
+  type?: string
+  placeholder?: string
+  disabled?: boolean
+  hidden?: boolean
+}
+
+interface FormModalProps {
+  inputs?: FormInputProps[]
+  title: string
+  acceptButtonLabel?: string
+  onSubmit: () => void
+  onOpenChange: (open: boolean) => void
+}
+
+export function FormModal(props: FormModalProps): JSX.Element {
+  return (
+    <ModalRoot defaultOpen onOpenChange={props.onOpenChange}>
+      <ModalOverlay />
+      <ModalContent>
+        <VStack alignment="center" distribution="center">
+          <StyledText style="modalHeadline">{props.title}</StyledText>
+          <Box>
+            <form>
+              {props.inputs?.map((input) => (
+                <HStack key={input.name}>
+                  <StyledText style={'boldText'}>{input.label}</StyledText>
+                  <FormInput
+                    key={input.name}
+                    type={input.type || 'text'}
+                    value={input.value}
+                    placeholder={input.placeholder}
+                    onChange={(event) => input.onChange(event.target.value)}
+                    disabled={input.disabled}
+                    hidden={input.hidden}
+                  />
+                </HStack>
+              ))}
+              <HStack distribution="center">
+                <Button
+                  style="ctaPill"
+                  onClick={() => props.onOpenChange(false)}
+                >
+                  Cancel
+                </Button>
+                <Button style="ctaPill" onClick={() => props.onSubmit}>
+                  {props.acceptButtonLabel || 'Submit'}
+                </Button>
+              </HStack>
+            </form>
+          </Box>
+        </VStack>
+      </ModalContent>
+    </ModalRoot>
+  )
+}