mirror of
https://github.com/rzmk/learnhouse.git
synced 2025-12-19 04:19:25 +00:00
feat: add Forms component
This commit is contained in:
swve
parent
a10fcbd9a0
commit
5eabb0b16a
5 changed files with 231 additions and 13 deletions
|
|
@ -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";
|
import React, { useState } from "react";
|
||||||
|
|
||||||
function NewChapterModal({ submitChapter , closeModal }: any) {
|
function NewChapterModal({ submitChapter, closeModal }: any) {
|
||||||
const [chapterName, setChapterName] = useState("");
|
const [chapterName, setChapterName] = useState("");
|
||||||
const [chapterDescription, setChapterDescription] = useState("");
|
const [chapterDescription, setChapterDescription] = useState("");
|
||||||
|
|
||||||
|
|
@ -15,17 +18,37 @@ function NewChapterModal({ submitChapter , closeModal }: any) {
|
||||||
const handleSubmit = async (e: any) => {
|
const handleSubmit = async (e: any) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
console.log({ chapterName, chapterDescription });
|
console.log({ chapterName, chapterDescription });
|
||||||
submitChapter({ name : chapterName, description : chapterDescription , activities : [] });
|
submitChapter({ name: chapterName, description: chapterDescription, activities: [] });
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
|
||||||
<button onClick={closeModal}>X</button>
|
<FormLayout onSubmit={handleSubmit}>
|
||||||
<input type="text" onChange={handleChapterNameChange} placeholder="Chapter Name" /> <br />
|
<FormField name="chapter-name">
|
||||||
<input type="text" onChange={handleChapterDescriptionChange} placeholder="Chapter Description" />
|
<Flex css={{ alignItems: 'baseline', justifyContent: 'space-between' }}>
|
||||||
<br />
|
<FormLabel>Chapter name</FormLabel>
|
||||||
<button onClick={handleSubmit}>Add Chapter</button>
|
<FormMessage match="valueMissing">Please provide a chapter name</FormMessage>
|
||||||
</div>
|
</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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
86
front/components/UI/Form/Form.tsx
Normal file
86
front/components/UI/Form/Form.tsx
Normal file
|
|
@ -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;
|
||||||
|
|
@ -32,10 +32,15 @@ const Modal = (params: ModalParams) => (
|
||||||
</DialogDescription>
|
</DialogDescription>
|
||||||
</DialogTopBar>
|
</DialogTopBar>
|
||||||
{params.dialogContent}
|
{params.dialogContent}
|
||||||
<Dialog.Close asChild>
|
{params.dialogClose ? (
|
||||||
{params.dialogClose}
|
<Flex css={{ marginTop: 25, justifyContent: 'flex-end' }}>
|
||||||
</Dialog.Close>
|
<Dialog.Close asChild>
|
||||||
|
{params.dialogClose}
|
||||||
|
</Dialog.Close>
|
||||||
|
</Flex>
|
||||||
|
) : null}
|
||||||
</DialogContent>
|
</DialogContent>
|
||||||
|
|
||||||
</Dialog.Portal>
|
</Dialog.Portal>
|
||||||
</Dialog.Root>
|
</Dialog.Root>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
103
front/package-lock.json
generated
103
front/package-lock.json
generated
|
|
@ -10,6 +10,7 @@
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@radix-ui/colors": "^0.1.8",
|
"@radix-ui/colors": "^0.1.8",
|
||||||
"@radix-ui/react-dialog": "^1.0.2",
|
"@radix-ui/react-dialog": "^1.0.2",
|
||||||
|
"@radix-ui/react-form": "^0.0.2",
|
||||||
"@radix-ui/react-icons": "^1.1.1",
|
"@radix-ui/react-icons": "^1.1.1",
|
||||||
"@stitches/react": "^1.2.8",
|
"@stitches/react": "^1.2.8",
|
||||||
"@tiptap/extension-collaboration": "^2.0.0-beta.199",
|
"@tiptap/extension-collaboration": "^2.0.0-beta.199",
|
||||||
|
|
@ -2457,6 +2458,37 @@
|
||||||
"react-dom": "^16.8 || ^17.0 || ^18.0"
|
"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": {
|
"node_modules/@radix-ui/react-icons": {
|
||||||
"version": "1.1.1",
|
"version": "1.1.1",
|
||||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-icons/-/react-icons-1.1.1.tgz",
|
"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"
|
"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": {
|
"node_modules/@radix-ui/react-portal": {
|
||||||
"version": "1.0.1",
|
"version": "1.0.1",
|
||||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.0.1.tgz",
|
"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-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": {
|
"@radix-ui/react-icons": {
|
||||||
"version": "1.1.1",
|
"version": "1.1.1",
|
||||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-icons/-/react-icons-1.1.1.tgz",
|
"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-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": {
|
"@radix-ui/react-portal": {
|
||||||
"version": "1.0.1",
|
"version": "1.0.1",
|
||||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.0.1.tgz",
|
||||||
|
|
|
||||||
|
|
@ -11,6 +11,7 @@
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@radix-ui/colors": "^0.1.8",
|
"@radix-ui/colors": "^0.1.8",
|
||||||
"@radix-ui/react-dialog": "^1.0.2",
|
"@radix-ui/react-dialog": "^1.0.2",
|
||||||
|
"@radix-ui/react-form": "^0.0.2",
|
||||||
"@radix-ui/react-icons": "^1.1.1",
|
"@radix-ui/react-icons": "^1.1.1",
|
||||||
"@stitches/react": "^1.2.8",
|
"@stitches/react": "^1.2.8",
|
||||||
"@tiptap/extension-collaboration": "^2.0.0-beta.199",
|
"@tiptap/extension-collaboration": "^2.0.0-beta.199",
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue