Компонент создания вопроса

package.json

@@ -6,6 +6,8 @@
     "@babel/preset-typescript": "^7.17.12",
     "@chakra-ui/icons": "^2.0.0",
     "@chakra-ui/react": "^2.1.0",
+    "@ckeditor/ckeditor5-build-classic": "^34.1.0",
+    "@ckeditor/ckeditor5-react": "^5.0.2",
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
     "@testing-library/jest-dom": "^5.16.4",
@@ -14,6 +16,7 @@
     "@types/jest": "^27.5.1",
     "@types/node": "^16.11.36",
     "@types/react": "^18.0.9",
+    "@types/react-color": "^3.0.6",
     "@types/react-dom": "^18.0.4",
     "axios": "^0.27.2",
     "formik": "^2.2.9",
@@ -22,11 +25,13 @@
     "notistack": "^2.0.5",
     "puppeteer": "^14.2.1",
     "react": "^18.1.0",
+    "react-color": "^2.19.3",
     "react-datepicker": "^4.8.0",
     "react-dom": "^18.1.0",
     "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
     "react-time-picker": "^4.5.0",
+    "suneditor-react": "^3.4.0",
     "ts-jest": "^28.0.3",
     "typescript": "^4.6.4",
     "web-vitals": "^2.1.4"

src/create/createQuestion.tsx

@@ -0,0 +1,121 @@
+import React from 'react';
+import { useField, Form, FormikProps, Formik } from 'formik';
+import {
+    Input, Select, Textarea, VStack, Checkbox, Box, Text, Divider, Button, useNumberInput,
+} from '@chakra-ui/react'
+import 'suneditor/dist/css/suneditor.min.css'; // Import Sun Editor's CSS File
+import Description from "./description";
+import Settings from "./settings";
+
+interface Values {
+    title: string;
+    lastName: string;
+    text: string;
+    desc: string;
+}
+
+const types = [
+    {desc:"текст", value:"text"},
+    {desc:"селект", value:"select"},
+    {desc:"чекбокс", value:"checkbox"},
+    {desc:"файл", value:"file"},
+    {desc:"кнопка", value:"button"},
+    {desc:"ничего", value:"none"}
+]
+
+const TextField = (props: any) => {
+
+    const [field, meta, helpers] = useField(props);
+
+    return (
+        <>
+            <Textarea resize="none" width="80%" {...field} {...props} />
+            {meta.touched && meta.error ? (
+                <div className="error">{meta.error}</div>
+            ) : null}
+        </>
+    );
+};
+
+
+export default () => {
+
+    const [type, setType] = React.useState<number>(0)
+    const [stockroom, setStockroom] = React.useState<any>([])
+    const stockroomHC = (value:Array<object>) => {
+        setStockroom([...value])
+    }
+    const typeHC = (value:number) => {
+        console.log(value)
+        setType(value)
+        setStockroom([])
+    }
+
+
+    return(
+        <>
+            <Formik
+                initialValues={{
+                    text: '',
+                    title: '',
+                    lastName: '',
+                    desc:'описание',
+                }}
+
+                onSubmit={(values, actions) => {
+                    console.log(JSON.stringify(values))
+                }}
+            >
+                {(props: FormikProps<Values>) => (
+
+                    <Form>
+                        <VStack>
+                            <TextField placeholder="Заголовок" name="title" type="text" />
+                            <Description name="desc"/>
+                            {
+                                type === 0 ? //Тип вопроса - текст?
+                                    <TextField name="text" placeholder="текст" type="text" />
+                                    :
+                                    stockroom.length === 0 ? //В поле для юзерских данных есть что-то?
+                                        null //Ничего не внесено
+                                        :
+                                        type === 1 ? //Тип вопроса - селект?
+                                            <Select>
+                                                {
+                                                    stockroom.map((e: any, i: number) => {
+                                                        return <option key={i}>{e.text}</option>
+                                                    })
+                                                }
+                                            </Select>
+                                            :
+                                            type === 2 ? //Тип вопроса - чекбокс?
+                                                stockroom.map((e:any, i:number) => {
+                                                    return <Checkbox key={i}>{e.text}</Checkbox>
+                                                })
+                                                :
+                                                type === 3 ? //Тип вопроса - файл?
+                                                    <input type="file"/>
+                                                    :
+                                                    type === 4 ? //Тип вопроса - кнопка?
+                                                        stockroom.map((e:any, i:number) => {
+                                                            return <Button key={i}>{e.text}</Button>
+                                                        })
+                                                        :
+                                                        null //Тип вопроса - ничего
+                            }
+                        </VStack>
+
+                        <Settings
+                            types={types}
+                            stockroomHC={stockroomHC}
+                            stockroom={stockroom}
+                            typeHC={typeHC}
+                            type={type}
+                        />
+                    </Form>
+
+                )}
+            </Formik>
+        </>
+    )
+}

src/create/createScope.tsx

@@ -1,14 +1,13 @@
 import React from 'react';
 import moment from 'moment';
 import {
-    Input, Select, Stack, Checkbox, Box, Text, Divider, Button, NumberInput,
+    Input, Select, Stack, Checkbox, Box, Text, Divider, Button, useNumberInput,
-    NumberInputField, NumberInputStepper, NumberIncrementStepper, NumberDecrementStepper, useNumberInput,
 } from '@chakra-ui/react'
 import { Formik, Field, Form } from 'formik';
 import DatePicker from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
 import TimePicker from 'react-time-picker';
-import {create} from "./API/quiz";
+import {create} from "../API/quiz";
 
 interface a {
     name?: string,

src/create/description.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import SunEditor from 'suneditor-react';
+import { useField, Formik, Form, Field } from 'formik';
+import {Box} from "@chakra-ui/react";
+
+// @ts-ignore
+export default ({name}) => {
+    const visual = React.useRef<HTMLDivElement | null>(null);
+    const [field, meta, helpers] = useField(name);
+    const [focus, setFocus] = React.useState(false)
+
+    React.useEffect(() => {
+        if (!focus) {
+            if (visual.current !== null) {
+                visual.current.innerHTML = meta.value
+            }
+        }
+    },[focus])
+
+    return(
+        <>
+            {
+                focus ?
+                    <Field
+                        as={SunEditor}
+                        name="description"
+                        onChange={(e:any)=> {
+                            helpers.setValue(e, false)
+                            console.log(e)
+                        }}
+                        // imageUploadHandler={(e:any)=>console.log(e)}
+                        // onImageUpload={(e:any)=>console.log(e)}
+                        // showController={(e:any)=>console.log(e)}
+                        // hideToolbar={false}
+                        defaultValue={meta.value}
+                        onBlur={(e:any) => {
+                            setTimeout(() => setFocus(false), 1000);
+                        }}
+                        setOptions={{
+                            buttonList: [
+                                [
+                                    'undo', 'redo',
+                                    'font', 'fontSize', 'formatBlock',
+                                    'paragraphStyle', 'blockquote',
+                                    'bold', 'underline', 'italic', 'strike', 'subscript', 'superscript',
+                                    'fontColor', 'hiliteColor', 'textStyle',
+                                    'removeFormat',
+                                    'outdent', 'indent',
+                                    'align', 'horizontalRule', 'list', 'lineHeight',
+                                    'table', 'link', 'image', 'video',
+                                    'fullScreen', 'showBlocks', 'codeView',
+                                    'preview', 'print', 'save', 'template',
+                                ]
+                            ]
+                        }}
+                    />
+                    :
+                    <Box
+                        onClick={() => setFocus(true)}
+                        border="solid 1px #d2d2d2"
+                        padding="10px"
+                        width="80%"
+                        ref={visual}
+                    />
+            }
+        </>
+    )
+}

src/create/settings.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+// import { useFormikContext, Formik, Form, Field } from 'formik';
+import {Box, Button, Checkbox, Container, Select, Textarea} from "@chakra-ui/react";
+import {ChromePicker} from 'react-color';
+import Buttons from "./tools/buttons"
+import List from "./tools/list"
+
+export default (props: any) => {
+    // const [variant, setVariant] = React.useState(0)
+    // const [stockroom, setStockroom] = React.useState<Array<object>>([])
+
+    const stockroomHC = (value: object, index: number, isDelete: boolean) => {
+        if (isDelete) {
+
+            let newArr = props.stockroom
+            newArr.splice(index, 1)
+            props.stockroomHC([...newArr])
+        } else {
+            let newArr = props.stockroom
+            newArr.push(value)
+            props.stockroomHC([...newArr])
+        }
+    }
+
+    return (
+        <Container
+            bgColor="lightgray"
+            padding="10px"
+            minWidth="100%"
+            borderRadius="5px"
+            position="fixed"
+            bottom={0}
+        >
+            <Select
+                placeholder='тип вопроса'
+                value={props.type}
+                onChange={e => {
+                    // setVariant(Number(e.target.value))
+                    props.typeHC(Number(e.target.value))
+                }}
+            >
+                {
+                    props.types.map((e: any, i: number) => (
+                        <option key={i} value={i}>{e.desc}</option>
+                    ))
+                }
+            </Select>
+            <Box>
+                {
+                    props.type === 1 ? //Тип вопроса - селект?
+                        <List stockroom={props.stockroom} stockroomHC={stockroomHC} />
+                        :
+                        props.type === 2 ? //Тип вопроса - чекбокс?
+                            <List stockroom={props.stockroom} stockroomHC={stockroomHC} />
+                            :
+                                props.type === 4 ? //Тип вопроса - кнопка?
+                                    <Buttons stockroom={props.stockroom} stockroomHC={stockroomHC}/>
+                                    :
+                                    null //Тип вопроса - ничего
+                }
+            </Box>
+        </Container>
+    )
+}

src/create/tools/buttons.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Button, VStack, HStack} from "@chakra-ui/react";
+import {ChromePicker} from "react-color";
+
+
+
+export default ({stockroom, stockroomHC}: {stockroom: any, stockroomHC:any}) => {
+    const [color, setColor] = React.useState("#fff")
+
+    return(
+        <HStack>
+
+            <ChromePicker
+                disableAlpha
+                color={color}
+                onChange={e => {
+                    setColor(e.hex)
+                }}
+            />
+            <Button
+                onClick={() => stockroomHC({text:"aaaa"},0 ,false)}
+            >Добавить</Button>
+            <VStack
+                border="1px solid gray"
+            >
+                {
+                    stockroom.map((e:object, i:number) => {
+
+                    })
+                }
+            </VStack>
+        </HStack>
+    )
+}

src/create/tools/list.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import {Button, VStack, HStack, Textarea, Container, Text, CloseButton} from "@chakra-ui/react";
+
+
+
+export default ({stockroom, stockroomHC}: {stockroom: any, stockroomHC:any}) => {
+    const [color, setColor] = React.useState("#fff")
+
+    return(
+        <HStack>
+            <Button
+                onClick={() => stockroomHC({text:"aaaa"},0 ,false)}
+            >Добавить</Button>
+
+            <Textarea
+                placeholder="описание"
+            />
+
+            <VStack
+                border="1px solid gray"
+                height="100px"
+                minWidth="30%"
+                overflow="auto"
+            >
+                {
+                    stockroom.map((e:any, i:number) => {
+                        return(
+                            <Container border="1px solid lightgray" key={i} display="inline-flex" alignItems="center">
+                                <Text>{e.text}</Text><CloseButton/>
+                            </Container>
+                        )
+                    })
+                }
+            </VStack>
+        </HStack>
+    )
+}

src/index.tsx

@@ -5,7 +5,8 @@ import { ChakraProvider } from '@chakra-ui/react';
 import { SnackbarProvider } from 'notistack';
 
 import Kit from "./kit";
-import Create from "./create";
+import CreateScope from "./create/createScope";
+import CreateQuestion from "./create/createQuestion";
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement
@@ -18,9 +19,9 @@ root.render(
               <BrowserRouter>
                       <Routes>
                           <Route path="/">
-                              <Route element={<Create/>} path="/create"/>
+                              <Route element={<CreateScope/>} path="/createScope"/>
                           </Route>
-                          <Route element={<Kit/>} path="kit"/>
+                          <Route element={<CreateQuestion/>} path="kit"/>
                       </Routes>
               </BrowserRouter>
           </SnackbarProvider>