From 5eabb0b16a587383602b89bd411bb9e93788f01c Mon Sep 17 00:00:00 2001
From: swve <bdswve@gmail.com>
Date: Sat, 8 Apr 2023 18:11:09 +0200
Subject: [PATCH] feat: add Forms component

---
 .../Pages/CourseEdit/NewChapter.tsx           |  41 +++++--
 front/components/UI/Form/Form.tsx             |  86 +++++++++++++++
 front/components/UI/Modal/Modal.tsx           |  13 ++-
 front/package-lock.json                       | 103 ++++++++++++++++++
 front/package.json                            |   1 +
 5 files changed, 231 insertions(+), 13 deletions(-)
 create mode 100644 front/components/UI/Form/Form.tsx

diff --git a/front/components/Pages/CourseEdit/NewChapter.tsx b/front/components/Pages/CourseEdit/NewChapter.tsx
index 11cb2927..8e03201c 100644
--- a/front/components/Pages/CourseEdit/NewChapter.tsx
+++ b/front/components/Pages/CourseEdit/NewChapter.tsx
@@ -1,6 +1,9 @@
+import FormLayout, { Flex, FormField, Input, Textarea, FormLabel, ButtonBlack } from "@components/UI/Form/Form";
+import { FormMessage } from "@radix-ui/react-form";
+import * as Form from '@radix-ui/react-form';
 import React, { useState } from "react";
 
-function NewChapterModal({ submitChapter , closeModal }: any) {
+function NewChapterModal({ submitChapter, closeModal }: any) {
   const [chapterName, setChapterName] = useState("");
   const [chapterDescription, setChapterDescription] = useState("");
 
@@ -15,17 +18,37 @@ function NewChapterModal({ submitChapter , closeModal }: any) {
   const handleSubmit = async (e: any) => {
     e.preventDefault();
     console.log({ chapterName, chapterDescription });
-    submitChapter({ name : chapterName, description : chapterDescription , activities : [] });
+    submitChapter({ name: chapterName, description: chapterDescription, activities: [] });
   };
 
   return (
-    <div>
-      <button onClick={closeModal}>X</button>
-      <input type="text" onChange={handleChapterNameChange} placeholder="Chapter Name" /> <br />
-      <input type="text" onChange={handleChapterDescriptionChange} placeholder="Chapter Description" />
-      <br />
-      <button onClick={handleSubmit}>Add Chapter</button>
-    </div>
+
+    <FormLayout onSubmit={handleSubmit}>
+      <FormField name="chapter-name">
+        <Flex css={{ alignItems: 'baseline', justifyContent: 'space-between' }}>
+          <FormLabel>Chapter name</FormLabel>
+          <FormMessage match="valueMissing">Please provide a chapter name</FormMessage>
+        </Flex>
+        <Form.Control asChild>
+          <Input onChange={handleChapterNameChange} type="text" required />
+        </Form.Control>
+      </FormField>
+      <FormField name="chapter-desc">
+        <Flex css={{ alignItems: 'baseline', justifyContent: 'space-between' }}>
+          <FormLabel>Chapter description</FormLabel>
+          <FormMessage match="valueMissing">Please provide a chapter description</FormMessage>
+        </Flex>
+        <Form.Control asChild>
+          <Textarea onChange={handleChapterDescriptionChange} required />
+        </Form.Control>
+      </FormField>
+
+      <Flex css={{ marginTop: 25, justifyContent: 'flex-end' }}>
+        <Form.Submit asChild>
+          <ButtonBlack type="submit" css={{ marginTop: 10 }}>Create chapter</ButtonBlack>
+        </Form.Submit>
+      </Flex>
+    </FormLayout>
   );
 }
 
diff --git a/front/components/UI/Form/Form.tsx b/front/components/UI/Form/Form.tsx
new file mode 100644
index 00000000..d904e185
--- /dev/null
+++ b/front/components/UI/Form/Form.tsx
@@ -0,0 +1,86 @@
+import React from 'react';
+import * as Form from '@radix-ui/react-form';
+import { styled, keyframes } from '@stitches/react';
+import { blackA, violet, mauve } from '@radix-ui/colors';
+
+const FormLayout = (props: any, onSubmit : any ) => (
+    <FormRoot onSubmit={props.onSubmit}>
+        {props.children}
+    </FormRoot>
+);
+
+export const FormRoot = styled(Form.Root, {
+    margin: 7
+});
+
+export const FormField = styled(Form.Field, {
+    display: 'grid',
+    marginBottom: 10,
+});
+
+export const FormLabel = styled(Form.Label, {
+    fontSize: 15,
+    fontWeight: 500,
+    lineHeight: '35px',
+    color: 'black',
+});
+
+export const FormMessage = styled(Form.Message, {
+    fontSize: 13,
+    color: 'white',
+    opacity: 0.8,
+});
+
+export const Flex = styled('div', { display: 'flex' });
+
+export const inputStyles = {
+    all: 'unset',
+    boxSizing: 'border-box',
+    width: '100%',
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 4,
+    fontSize: 15,
+    color: '#7c7c7c',
+    background: "#F9FAFB",
+    boxShadow: `0 0 0 1px #edeeef`,
+    '&:hover': { boxShadow: `0 0 0 1px #edeeef` },
+    '&:focus': { boxShadow: `0 0 0 2px #edeeef` },
+    '&::selection': { backgroundColor: blackA.blackA9, color: 'white' },
+    
+};
+
+export const Input = styled('input', {
+    ...inputStyles,
+    height: 35,
+    lineHeight: 1,
+    padding: '0 10px',
+    border: 'none',
+});
+
+export const Textarea = styled('textarea', {
+    ...inputStyles,
+    resize: 'none',
+    padding: 10,
+});
+
+export const ButtonBlack = styled('button', {
+    all: 'unset',
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 8,
+    padding: '0 15px',
+    fontSize: 15,
+    lineHeight: 1,
+    fontWeight: 500,
+    height: 35,
+
+    background: "#000000",
+    color: "#FFFFFF",
+    '&:hover': { backgroundColor: "#181818" , cursor: "pointer"},
+    '&:focus': { boxShadow: `0 0 0 2px black` },
+});
+
+export default FormLayout;
\ No newline at end of file
diff --git a/front/components/UI/Modal/Modal.tsx b/front/components/UI/Modal/Modal.tsx
index 6eae03de..1f95d535 100644
--- a/front/components/UI/Modal/Modal.tsx
+++ b/front/components/UI/Modal/Modal.tsx
@@ -21,7 +21,7 @@ const Modal = (params: ModalParams) => (
                 {params.dialogTrigger}
             </Dialog.Trigger>
         ) : null}
-        
+
         <Dialog.Portal>
             <DialogOverlay />
             <DialogContent minHeight={params.minHeight}>
@@ -32,10 +32,15 @@ const Modal = (params: ModalParams) => (
                     </DialogDescription>
                 </DialogTopBar>
                 {params.dialogContent}
-                <Dialog.Close asChild>
-                    {params.dialogClose}
-                </Dialog.Close>
+                {params.dialogClose ? (
+                    <Flex css={{ marginTop: 25, justifyContent: 'flex-end' }}>
+                        <Dialog.Close asChild>
+                            {params.dialogClose}
+                        </Dialog.Close>
+                    </Flex>
+                ) : null}
             </DialogContent>
+
         </Dialog.Portal>
     </Dialog.Root>
 );
diff --git a/front/package-lock.json b/front/package-lock.json
index b562f2b7..3f2c5121 100644
--- a/front/package-lock.json
+++ b/front/package-lock.json
@@ -10,6 +10,7 @@
       "dependencies": {
         "@radix-ui/colors": "^0.1.8",
         "@radix-ui/react-dialog": "^1.0.2",
+        "@radix-ui/react-form": "^0.0.2",
         "@radix-ui/react-icons": "^1.1.1",
         "@stitches/react": "^1.2.8",
         "@tiptap/extension-collaboration": "^2.0.0-beta.199",
@@ -2457,6 +2458,37 @@
         "react-dom": "^16.8 || ^17.0 || ^18.0"
       }
     },
+    "node_modules/@radix-ui/react-form": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-form/-/react-form-0.0.2.tgz",
+      "integrity": "sha512-+WQU4Gs4MqjYsHwh5d19Ka4CMcWeXd7WPuWYCYGtNbDRMHFG2TtgM9PlEK4Yrk7wG1f5/da6Bgtteky2ggDXUg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.0",
+        "@radix-ui/react-compose-refs": "1.0.0",
+        "@radix-ui/react-context": "1.0.0",
+        "@radix-ui/react-id": "1.0.0",
+        "@radix-ui/react-label": "2.0.1",
+        "@radix-ui/react-primitive": "1.0.2"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/@radix-ui/react-form/node_modules/@radix-ui/react-primitive": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.2.tgz",
+      "integrity": "sha512-zY6G5Qq4R8diFPNwtyoLRZBxzu1Z+SXMlfYpChN7Dv8gvmx9X3qhDqiLWvKseKVJMuedFeU/Sa0Sy/Ia+t06Dw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-slot": "1.0.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
     "node_modules/@radix-ui/react-icons": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-icons/-/react-icons-1.1.1.tgz",
@@ -2477,6 +2509,32 @@
         "react": "^16.8 || ^17.0 || ^18.0"
       }
     },
+    "node_modules/@radix-ui/react-label": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-label/-/react-label-2.0.1.tgz",
+      "integrity": "sha512-qcfbS3B8hTYmEO44RNcXB6pegkxRsJIbdxTMu0PEX0Luv5O2DvTIwwVYxQfUwLpM88EL84QRPLOLgwUSApMsLQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-primitive": "1.0.2"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/@radix-ui/react-label/node_modules/@radix-ui/react-primitive": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.2.tgz",
+      "integrity": "sha512-zY6G5Qq4R8diFPNwtyoLRZBxzu1Z+SXMlfYpChN7Dv8gvmx9X3qhDqiLWvKseKVJMuedFeU/Sa0Sy/Ia+t06Dw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-slot": "1.0.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
     "node_modules/@radix-ui/react-portal": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.0.1.tgz",
@@ -8995,6 +9053,31 @@
         "@radix-ui/react-use-callback-ref": "1.0.0"
       }
     },
+    "@radix-ui/react-form": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-form/-/react-form-0.0.2.tgz",
+      "integrity": "sha512-+WQU4Gs4MqjYsHwh5d19Ka4CMcWeXd7WPuWYCYGtNbDRMHFG2TtgM9PlEK4Yrk7wG1f5/da6Bgtteky2ggDXUg==",
+      "requires": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.0",
+        "@radix-ui/react-compose-refs": "1.0.0",
+        "@radix-ui/react-context": "1.0.0",
+        "@radix-ui/react-id": "1.0.0",
+        "@radix-ui/react-label": "2.0.1",
+        "@radix-ui/react-primitive": "1.0.2"
+      },
+      "dependencies": {
+        "@radix-ui/react-primitive": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.2.tgz",
+          "integrity": "sha512-zY6G5Qq4R8diFPNwtyoLRZBxzu1Z+SXMlfYpChN7Dv8gvmx9X3qhDqiLWvKseKVJMuedFeU/Sa0Sy/Ia+t06Dw==",
+          "requires": {
+            "@babel/runtime": "^7.13.10",
+            "@radix-ui/react-slot": "1.0.1"
+          }
+        }
+      }
+    },
     "@radix-ui/react-icons": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-icons/-/react-icons-1.1.1.tgz",
@@ -9010,6 +9093,26 @@
         "@radix-ui/react-use-layout-effect": "1.0.0"
       }
     },
+    "@radix-ui/react-label": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-label/-/react-label-2.0.1.tgz",
+      "integrity": "sha512-qcfbS3B8hTYmEO44RNcXB6pegkxRsJIbdxTMu0PEX0Luv5O2DvTIwwVYxQfUwLpM88EL84QRPLOLgwUSApMsLQ==",
+      "requires": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-primitive": "1.0.2"
+      },
+      "dependencies": {
+        "@radix-ui/react-primitive": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.2.tgz",
+          "integrity": "sha512-zY6G5Qq4R8diFPNwtyoLRZBxzu1Z+SXMlfYpChN7Dv8gvmx9X3qhDqiLWvKseKVJMuedFeU/Sa0Sy/Ia+t06Dw==",
+          "requires": {
+            "@babel/runtime": "^7.13.10",
+            "@radix-ui/react-slot": "1.0.1"
+          }
+        }
+      }
+    },
     "@radix-ui/react-portal": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.0.1.tgz",
diff --git a/front/package.json b/front/package.json
index f7ab0554..eea65ed2 100644
--- a/front/package.json
+++ b/front/package.json
@@ -11,6 +11,7 @@
   "dependencies": {
     "@radix-ui/colors": "^0.1.8",
     "@radix-ui/react-dialog": "^1.0.2",
+    "@radix-ui/react-form": "^0.0.2",
     "@radix-ui/react-icons": "^1.1.1",
     "@stitches/react": "^1.2.8",
     "@tiptap/extension-collaboration": "^2.0.0-beta.199",