diff --git a/datacenter/app/datastores/documents/chunklist/page.tsx b/datacenter/app/datastores/documents/chunklist/page.tsx index 9cd701ff9..42c9da062 100644 --- a/datacenter/app/datastores/documents/chunklist/page.tsx +++ b/datacenter/app/datastores/documents/chunklist/page.tsx @@ -1,65 +1,76 @@ -"use client"; +'use client' import { useSearchParams } from 'next/navigation' -import React, { useState, useEffect } from 'react'; -import { Table, Popover } from 'antd'; -import moment from 'moment'; +import React, { useState, useEffect } from 'react' +import { Table } from '@/lib/mui' +import { Popover } from 'antd' const ChunkList = () => { - const spaceName = useSearchParams().get('spacename'); - const documentId = useSearchParams().get('documentid'); - const [chunkList, setChunkList] = useState([]); - useEffect(() => { - async function fetchChunks() { - const res = await fetch(`http://localhost:8000/knowledge/${spaceName}/chunk/list`, { - method: 'POST', - headers: { - 'Content-Type': 'application/json', - }, - body: JSON.stringify({ - document_id: documentId - }), - }); - const data = await res.json(); - if (data.success) { - setChunkList(data.data); - } + const spaceName = useSearchParams().get('spacename') + const documentId = useSearchParams().get('documentid') + const [chunkList, setChunkList] = useState([]) + useEffect(() => { + async function fetchChunks() { + const res = await fetch( + `http://localhost:8000/knowledge/${spaceName}/chunk/list`, + { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify({ + document_id: documentId + }) } - fetchChunks(); - }, []); - return ( -
- { - return {text.length < 10 ? `${text.slice(0, 10)}...` : text}; - } - }, - { - title: 'Meta Data', - dataIndex: 'meta_info', - key: 'meta_info', - align: 'center', - render: (text: string, label: any) => { - return {text.length < 10 ? `${text.slice(0, 10)}...` : text}; - } - }, - ]} - dataSource={chunkList} - /> - - ) + ) + const data = await res.json() + if (data.success) { + setChunkList(data.data) + } + } + fetchChunks() + }, []) + return ( +
+
+ + + + + + + + + {chunkList.map((row: any) => ( + + + + + + ))} + +
NameContentMeta Data
{row.doc_name} + { + + {row.content.length > 10 + ? `${row.content.slice(0, 10)}...` + : row.content} + + } + + { + + {row.meta_info.length > 10 + ? `${row.meta_info.slice(0, 10)}...` + : row.meta_info} + + } +
+
+ ) } -export default ChunkList; \ No newline at end of file +export default ChunkList diff --git a/datacenter/app/datastores/documents/page.tsx b/datacenter/app/datastores/documents/page.tsx index 54bd31d5d..23ee57bf3 100644 --- a/datacenter/app/datastores/documents/page.tsx +++ b/datacenter/app/datastores/documents/page.tsx @@ -1,84 +1,292 @@ -"use client"; +'use client' -import Link from 'next/link' import { useRouter, useSearchParams } from 'next/navigation' -import React, { useState, useEffect } from 'react'; -import { Table, Button } from 'antd'; -import moment from 'moment'; +import React, { useState, useEffect } from 'react' +import { + Button, + Table, + Sheet, + Modal, + Box, + Stack, + Input, + styled +} from '@/lib/mui' +import moment from 'moment' +import { message } from 'antd' + +const stepsOfAddingDocument = [ + 'Choose a Datasource type', + 'Setup the Datasource' +] +const documentTypeList = [ + { + type: 'text', + title: 'Text', + subTitle: 'Paste some text' + }, + { + type: 'webPage', + title: 'Web Page', + subTitle: 'Crawl text from a web page' + }, + { + type: 'file', + title: 'File', + subTitle: 'It can be: PDF, CSV, JSON, Text, PowerPoint, Word, Excel' + } +] +const Item = styled(Sheet)(({ theme }) => ({ + width: '50%', + backgroundColor: + theme.palette.mode === 'dark' ? theme.palette.background.level1 : '#fff', + ...theme.typography.body2, + padding: theme.spacing(1), + textAlign: 'center', + borderRadius: 4, + color: theme.vars.palette.text.secondary +})) const Documents = () => { - const router = useRouter(); - const spaceName = useSearchParams().get('name'); - const [documents, setDocuments] = useState([]); - useEffect(() => { - async function fetchDocuments() { - const res = await fetch(`http://localhost:8000/knowledge/${spaceName}/document/list`, { - method: 'POST', - headers: { - 'Content-Type': 'application/json', - }, - body: JSON.stringify({}), - }); - const data = await res.json(); - if (data.success) { - setDocuments(data.data); - } + const router = useRouter() + const spaceName = useSearchParams().get('name') + const [isAddDocumentModalShow, setIsAddDocumentModalShow] = + useState(false) + const [activeStep, setActiveStep] = useState(0) + const [documents, setDocuments] = useState([]) + const [webPageUrl, setWebPageUrl] = useState('') + const [documentName, setDocumentName] = useState('') + useEffect(() => { + async function fetchDocuments() { + const res = await fetch( + `http://localhost:8000/knowledge/${spaceName}/document/list`, + { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify({}) } - fetchDocuments(); - }, []); - return ( -
- moment(text).format('YYYY-MM-DD HH:MM:SS') - }, - { - title: 'Status', - dataIndex: 'status', - key: 'status', - align: 'center', - }, - { - title: 'Operation', - dataIndex: 'operation', - key: 'operation', - align: 'center', - render: (_: any, label: any) => { - return ( - - ) + ) + const data = await res.json() + if (data.success) { + setDocuments(data.data) + } + } + fetchDocuments() + }, []) + return ( +
+ + + +
+ + + + + + + + + + + + {documents.map((row: any) => ( + + + + + + + + + ))} + +
NameTypeSizeLast SynchStatusOperation
{row.doc_name}{row.doc_type}{row.chunk_size}{moment(row.last_sync).format('YYYY-MM-DD HH:MM:SS')}{row.status} + { + <> + + + + } +
+ setIsAddDocumentModalShow(false)} + > + + + + {stepsOfAddingDocument.map((item: any, index: number) => ( + + {item} + + ))} + + + {activeStep === 0 ? ( + <> + + {documentTypeList.map((item: any) => ( + { + if (item.type === 'webPage') { + setActiveStep(1) + } + }} + > + + {item.title} + + {item.subTitle} + + ))} + + + ) : ( + <> + + Name: + setDocumentName(e.target.value)} + sx={{ marginBottom: '20px' }} + /> + Web Page URL: + setWebPageUrl(e.target.value)} + /> + + + + )} + + +
+ ) } -export default Documents; \ No newline at end of file +export default Documents diff --git a/datacenter/app/datastores/page.tsx b/datacenter/app/datastores/page.tsx index aeca11bfe..06f96cdbd 100644 --- a/datacenter/app/datastores/page.tsx +++ b/datacenter/app/datastores/page.tsx @@ -1,252 +1,298 @@ 'use client' import { useRouter } from 'next/navigation' -import type { ProFormInstance } from '@ant-design/pro-components'; -import React, { useState, useRef, useEffect } from 'react' +import React, { useState, useEffect } from 'react' +import { message } from 'antd' import { - ProCard, - ProForm, - ProFormCheckbox, - ProFormDatePicker, - ProFormDateRangePicker, - ProFormSelect, - ProFormText, - ProFormTextArea, - StepsForm -} from '@ant-design/pro-components' -import { Button, Modal, Table, message } from 'antd' + Modal, + Button, + Table, + Sheet, + Stack, + Box, + Input, + styled +} from '@/lib/mui' + +const Item = styled(Sheet)(({ theme }) => ({ + width: '33%', + backgroundColor: + theme.palette.mode === 'dark' ? theme.palette.background.level1 : '#fff', + ...theme.typography.body2, + padding: theme.spacing(1), + textAlign: 'center', + borderRadius: 4, + color: theme.vars.palette.text.secondary +})) + +const stepsOfAddingSpace = [ + 'Knowledge Space Configuration', + 'Choose a Datasource type', + 'Setup the Datasource' +] +const documentTypeList = [ + { + type: 'text', + title: 'Text', + subTitle: 'Paste some text' + }, + { + type: 'webPage', + title: 'Web Page', + subTitle: 'Crawl text from a web page' + }, + { + type: 'file', + title: 'File', + subTitle: 'It can be: PDF, CSV, JSON, Text, PowerPoint, Word, Excel' + } +] const Index = () => { - const router = useRouter(); - const formRef = useRef(); - const [knowledgeSpaceList, setKnowledgeSpaceList] = useState([]); + const router = useRouter() + const [activeStep, setActiveStep] = useState(0) + const [knowledgeSpaceList, setKnowledgeSpaceList] = useState([]) const [isAddKnowledgeSpaceModalShow, setIsAddKnowledgeSpaceModalShow] = - useState(false); - const [knowledgeSpaceName, setKnowledgeSpaceName] = useState(''); - const [webPageUrl, setWebPageUrl] = useState(''); + useState(false) + const [knowledgeSpaceName, setKnowledgeSpaceName] = useState('') + const [webPageUrl, setWebPageUrl] = useState('') + const [documentName, setDocumentName] = useState('') useEffect(() => { async function fetchData() { const res = await fetch('http://localhost:8000/knowledge/space/list', { method: 'POST', headers: { - 'Content-Type': 'application/json', + 'Content-Type': 'application/json' }, - body: JSON.stringify({}), - }); - const data = await res.json(); + body: JSON.stringify({}) + }) + const data = await res.json() if (data.success) { - setKnowledgeSpaceList(data.data); + setKnowledgeSpaceList(data.data) } } - fetchData(); - }, []); + fetchData() + }, []) return ( <> -
-
Knowledge Spaces
- -
+
- { - return router.push(`/datastores/documents?name=${text}`)}>{text} - } - }, - { - title: 'Provider', - dataIndex: 'vector_type', - key: 'vector_type', - align: 'center', - }, - { - title: 'Owner', - dataIndex: 'owner', - key: 'owner', - align: 'center', - }, - ]} - dataSource={knowledgeSpaceList} - /> +
+ + + + + + + + + {knowledgeSpaceList.map((row: any) => ( + + + + + + ))} + +
NameProviderOwner
+ { + + router.push(`/datastores/documents?name=${row.name}`) + } + > + {row.name} + + } + {row.vector_type}{row.owner}
console.log('ok')} - onCancel={() => setIsAddKnowledgeSpaceModalShow(false)} + onClose={() => setIsAddKnowledgeSpaceModalShow(false)} > - - - formRef={formRef} - onFinish={async () => { - message.success('success') - }} - formProps={{ - validateMessages: { - required: 'This is required' - } - }} - submitter={{ - render: (props) => { - if (props.step === 0) { - return ( - - ); - } else if (props.step === 1) { - return ( - - ); - } - - return [ - , - + + ) : activeStep === 1 ? ( + <> + + {documentTypeList.map((item: any) => ( + { + if (item.type === 'webPage') { + setActiveStep(2); } }} > - Finish - , - ]; - }, - }} - > - - name="base" - title="Knowledge Space Configuration" - onFinish={async () => { - console.log(formRef.current?.getFieldsValue()) - return true - }} - > - setKnowledgeSpaceName(e.target.value)} - /> - - - name="checkbox" - title="Choose a Datasource type" - onFinish={async () => { - console.log(formRef.current?.getFieldsValue()) - return true - }} - > - - - setWebPageUrl(e.target.value)} - /> - - - + {item.title} + {item.subTitle} + + ))} + + + ) : ( + <> + + Name: + setDocumentName(e.target.value)} + sx={{ marginBottom: '20px'}} + /> + Web Page URL: + setWebPageUrl(e.target.value)} + /> + + + + )} + - ) } diff --git a/datacenter/package-lock.json b/datacenter/package-lock.json index caff46e2e..682366559 100644 --- a/datacenter/package-lock.json +++ b/datacenter/package-lock.json @@ -17,7 +17,8 @@ "@mui/icons-material": "^5.11.16", "@mui/joy": "5.0.0-alpha.72", "@mui/lab": "5.0.0-alpha.124", - "@mui/material": "^5.11.14", + "@mui/material": "^5.13.6", + "@mui/styled-engine-sc": "^5.12.0", "@mui/utils": "^5.11.13", "@prisma/client": "^4.12.0", "@types/node": "20.3.1", @@ -42,6 +43,7 @@ "react-hook-form": "^7.43.8", "react-markdown": "^8.0.7", "remark-gfm": "^3.0.1", + "styled-components": "^5.3.11", "swr": "^2.1.1", "tailwindcss": "3.3.2", "typescript": "5.1.3", @@ -713,6 +715,17 @@ "node": ">=6.9.0" } }, + "node_modules/@babel/helper-annotate-as-pure": { + "version": "7.22.5", + "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.22.5.tgz", + "integrity": "sha512-LvBTxu8bQSQkcyKOU+a1btnNFQ1dMAd0R6PyW3arXes06F6QLWLIrd681bxRPIXlrMGR3XYnW9JyML7dP3qgxg==", + "dependencies": { + "@babel/types": "^7.22.5" + }, + "engines": { + "node": ">=6.9.0" + } + }, "node_modules/@babel/helper-compilation-targets": { "version": "7.22.5", "resolved": "https://registry.npmmirror.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.22.5.tgz", @@ -992,6 +1005,20 @@ "node": ">=6.0.0" } }, + "node_modules/@babel/plugin-syntax-jsx": { + "version": "7.22.5", + "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.22.5.tgz", + "integrity": "sha512-gvyP4hZrgrs/wWMaocvxZ44Hw0b3W8Pe+cMxc8V1ULQ07oh8VNbIRaoD1LRZVTvD+0nieDKjfgKg89sD7rrKrg==", + "dependencies": { + "@babel/helper-plugin-utils": "^7.22.5" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, "node_modules/@babel/plugin-transform-modules-commonjs": { "version": "7.22.5", "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.22.5.tgz", @@ -1279,6 +1306,11 @@ } } }, + "node_modules/@emotion/stylis": { + "version": "0.8.5", + "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz", + "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==" + }, "node_modules/@emotion/unitless": { "version": "0.8.1", "resolved": "https://registry.npmmirror.com/@emotion/unitless/-/unitless-0.8.1.tgz", @@ -1645,7 +1677,7 @@ }, "node_modules/@mui/material": { "version": "5.13.6", - "resolved": "https://registry.npmmirror.com/@mui/material/-/material-5.13.6.tgz", + "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.13.6.tgz", "integrity": "sha512-/c2ZApeQm2sTYdQXjqEnldaBMBcUEiyu2VRS6bS39ZeNaAcCLBQbYocLR46R+f0S5dgpBzB0T4AsOABPOFYZ5Q==", "dependencies": { "@babel/runtime": "^7.22.5", @@ -1664,6 +1696,10 @@ "engines": { "node": ">=12.0.0" }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui" + }, "peerDependencies": { "@emotion/react": "^11.5.0", "@emotion/styled": "^11.3.0", @@ -1737,6 +1773,31 @@ } } }, + "node_modules/@mui/styled-engine-sc": { + "version": "5.12.0", + "resolved": "https://registry.npmjs.org/@mui/styled-engine-sc/-/styled-engine-sc-5.12.0.tgz", + "integrity": "sha512-3MgYoY2YG5tx0E5oKqvCv94oL0ABVBr+qpcyvciXW/v0wzPG6bXvuZV80GHYlJfasgnnRa1AbRWf5a9FcX8v6g==", + "dependencies": { + "@babel/runtime": "^7.21.0", + "prop-types": "^15.8.1" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui" + }, + "peerDependencies": { + "@types/styled-components": "^5.1.14", + "styled-components": "^5.3.1" + }, + "peerDependenciesMeta": { + "@types/styled-components": { + "optional": true + } + } + }, "node_modules/@mui/system": { "version": "5.13.6", "resolved": "https://registry.npmmirror.com/@mui/system/-/system-5.13.6.tgz", @@ -2779,6 +2840,21 @@ "@babel/core": "^7.0.0-0" } }, + "node_modules/babel-plugin-styled-components": { + "version": "2.1.4", + "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-2.1.4.tgz", + "integrity": "sha512-Xgp9g+A/cG47sUyRwwYxGM4bR/jDRg5N6it/8+HxCnbT5XNKSKDT9xm4oag/osgqjC2It/vH0yXsomOG6k558g==", + "dependencies": { + "@babel/helper-annotate-as-pure": "^7.22.5", + "@babel/helper-module-imports": "^7.22.5", + "@babel/plugin-syntax-jsx": "^7.22.5", + "lodash": "^4.17.21", + "picomatch": "^2.3.1" + }, + "peerDependencies": { + "styled-components": ">= 2" + } + }, "node_modules/babel-plugin-transform-replace-object-assign": { "version": "2.0.0", "resolved": "https://registry.npmmirror.com/babel-plugin-transform-replace-object-assign/-/babel-plugin-transform-replace-object-assign-2.0.0.tgz", @@ -2978,6 +3054,14 @@ "node": ">= 6" } }, + "node_modules/camelize": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz", + "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==", + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/caniuse-lite": { "version": "1.0.30001507", "resolved": "https://registry.npmmirror.com/caniuse-lite/-/caniuse-lite-1.0.30001507.tgz", @@ -3196,6 +3280,24 @@ "node": ">= 8" } }, + "node_modules/css-color-keywords": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", + "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==", + "engines": { + "node": ">=4" + } + }, + "node_modules/css-to-react-native": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz", + "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==", + "dependencies": { + "camelize": "^1.0.0", + "css-color-keywords": "^1.0.0", + "postcss-value-parser": "^4.0.2" + } + }, "node_modules/cssesc": { "version": "3.0.0", "resolved": "https://registry.npmmirror.com/cssesc/-/cssesc-3.0.0.tgz", @@ -7484,6 +7586,59 @@ "inline-style-parser": "0.1.1" } }, + "node_modules/styled-components": { + "version": "5.3.11", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.11.tgz", + "integrity": "sha512-uuzIIfnVkagcVHv9nE0VPlHPSCmXIUGKfJ42LNjxCCTDTL5sgnJ8Z7GZBq0EnLYGln77tPpEpExt2+qa+cZqSw==", + "dependencies": { + "@babel/helper-module-imports": "^7.0.0", + "@babel/traverse": "^7.4.5", + "@emotion/is-prop-valid": "^1.1.0", + "@emotion/stylis": "^0.8.4", + "@emotion/unitless": "^0.7.4", + "babel-plugin-styled-components": ">= 1.12.0", + "css-to-react-native": "^3.0.0", + "hoist-non-react-statics": "^3.0.0", + "shallowequal": "^1.1.0", + "supports-color": "^5.5.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/styled-components" + }, + "peerDependencies": { + "react": ">= 16.8.0", + "react-dom": ">= 16.8.0", + "react-is": ">= 16.8.0" + } + }, + "node_modules/styled-components/node_modules/@emotion/unitless": { + "version": "0.7.5", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz", + "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==" + }, + "node_modules/styled-components/node_modules/has-flag": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", + "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==", + "engines": { + "node": ">=4" + } + }, + "node_modules/styled-components/node_modules/supports-color": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", + "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", + "dependencies": { + "has-flag": "^3.0.0" + }, + "engines": { + "node": ">=4" + } + }, "node_modules/styled-jsx": { "version": "5.1.1", "resolved": "https://registry.npmmirror.com/styled-jsx/-/styled-jsx-5.1.1.tgz", @@ -8765,6 +8920,14 @@ "jsesc": "^2.5.1" } }, + "@babel/helper-annotate-as-pure": { + "version": "7.22.5", + "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.22.5.tgz", + "integrity": "sha512-LvBTxu8bQSQkcyKOU+a1btnNFQ1dMAd0R6PyW3arXes06F6QLWLIrd681bxRPIXlrMGR3XYnW9JyML7dP3qgxg==", + "requires": { + "@babel/types": "^7.22.5" + } + }, "@babel/helper-compilation-targets": { "version": "7.22.5", "resolved": "https://registry.npmmirror.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.22.5.tgz", @@ -8975,6 +9138,14 @@ "resolved": "https://registry.npmmirror.com/@babel/parser/-/parser-7.22.5.tgz", "integrity": "sha512-DFZMC9LJUG9PLOclRC32G63UXwzqS2koQC8dkx+PLdmt1xSePYpbT/NbsrJy8Q/muXz7o/h/d4A7Fuyixm559Q==" }, + "@babel/plugin-syntax-jsx": { + "version": "7.22.5", + "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.22.5.tgz", + "integrity": "sha512-gvyP4hZrgrs/wWMaocvxZ44Hw0b3W8Pe+cMxc8V1ULQ07oh8VNbIRaoD1LRZVTvD+0nieDKjfgKg89sD7rrKrg==", + "requires": { + "@babel/helper-plugin-utils": "^7.22.5" + } + }, "@babel/plugin-transform-modules-commonjs": { "version": "7.22.5", "resolved": "https://registry.npmmirror.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.22.5.tgz", @@ -9199,6 +9370,11 @@ "@emotion/utils": "^1.2.1" } }, + "@emotion/stylis": { + "version": "0.8.5", + "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz", + "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==" + }, "@emotion/unitless": { "version": "0.8.1", "resolved": "https://registry.npmmirror.com/@emotion/unitless/-/unitless-0.8.1.tgz", @@ -9444,7 +9620,7 @@ }, "@mui/material": { "version": "5.13.6", - "resolved": "https://registry.npmmirror.com/@mui/material/-/material-5.13.6.tgz", + "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.13.6.tgz", "integrity": "sha512-/c2ZApeQm2sTYdQXjqEnldaBMBcUEiyu2VRS6bS39ZeNaAcCLBQbYocLR46R+f0S5dgpBzB0T4AsOABPOFYZ5Q==", "requires": { "@babel/runtime": "^7.22.5", @@ -9489,6 +9665,15 @@ "prop-types": "^15.8.1" } }, + "@mui/styled-engine-sc": { + "version": "5.12.0", + "resolved": "https://registry.npmjs.org/@mui/styled-engine-sc/-/styled-engine-sc-5.12.0.tgz", + "integrity": "sha512-3MgYoY2YG5tx0E5oKqvCv94oL0ABVBr+qpcyvciXW/v0wzPG6bXvuZV80GHYlJfasgnnRa1AbRWf5a9FcX8v6g==", + "requires": { + "@babel/runtime": "^7.21.0", + "prop-types": "^15.8.1" + } + }, "@mui/system": { "version": "5.13.6", "resolved": "https://registry.npmmirror.com/@mui/system/-/system-5.13.6.tgz", @@ -10248,6 +10433,18 @@ "@babel/helper-define-polyfill-provider": "^0.4.0" } }, + "babel-plugin-styled-components": { + "version": "2.1.4", + "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-2.1.4.tgz", + "integrity": "sha512-Xgp9g+A/cG47sUyRwwYxGM4bR/jDRg5N6it/8+HxCnbT5XNKSKDT9xm4oag/osgqjC2It/vH0yXsomOG6k558g==", + "requires": { + "@babel/helper-annotate-as-pure": "^7.22.5", + "@babel/helper-module-imports": "^7.22.5", + "@babel/plugin-syntax-jsx": "^7.22.5", + "lodash": "^4.17.21", + "picomatch": "^2.3.1" + } + }, "babel-plugin-transform-replace-object-assign": { "version": "2.0.0", "resolved": "https://registry.npmmirror.com/babel-plugin-transform-replace-object-assign/-/babel-plugin-transform-replace-object-assign-2.0.0.tgz", @@ -10404,6 +10601,11 @@ "resolved": "https://registry.npmmirror.com/camelcase-css/-/camelcase-css-2.0.1.tgz", "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==" }, + "camelize": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz", + "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==" + }, "caniuse-lite": { "version": "1.0.30001507", "resolved": "https://registry.npmmirror.com/caniuse-lite/-/caniuse-lite-1.0.30001507.tgz", @@ -10588,6 +10790,21 @@ "which": "^2.0.1" } }, + "css-color-keywords": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", + "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==" + }, + "css-to-react-native": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz", + "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==", + "requires": { + "camelize": "^1.0.0", + "css-color-keywords": "^1.0.0", + "postcss-value-parser": "^4.0.2" + } + }, "cssesc": { "version": "3.0.0", "resolved": "https://registry.npmmirror.com/cssesc/-/cssesc-3.0.0.tgz", @@ -13973,6 +14190,43 @@ "inline-style-parser": "0.1.1" } }, + "styled-components": { + "version": "5.3.11", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.11.tgz", + "integrity": "sha512-uuzIIfnVkagcVHv9nE0VPlHPSCmXIUGKfJ42LNjxCCTDTL5sgnJ8Z7GZBq0EnLYGln77tPpEpExt2+qa+cZqSw==", + "requires": { + "@babel/helper-module-imports": "^7.0.0", + "@babel/traverse": "^7.4.5", + "@emotion/is-prop-valid": "^1.1.0", + "@emotion/stylis": "^0.8.4", + "@emotion/unitless": "^0.7.4", + "babel-plugin-styled-components": ">= 1.12.0", + "css-to-react-native": "^3.0.0", + "hoist-non-react-statics": "^3.0.0", + "shallowequal": "^1.1.0", + "supports-color": "^5.5.0" + }, + "dependencies": { + "@emotion/unitless": { + "version": "0.7.5", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz", + "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==" + }, + "has-flag": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", + "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==" + }, + "supports-color": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", + "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", + "requires": { + "has-flag": "^3.0.0" + } + } + } + }, "styled-jsx": { "version": "5.1.1", "resolved": "https://registry.npmmirror.com/styled-jsx/-/styled-jsx-5.1.1.tgz", diff --git a/datacenter/package.json b/datacenter/package.json index e2b0b793e..c27347d4c 100644 --- a/datacenter/package.json +++ b/datacenter/package.json @@ -18,7 +18,8 @@ "@mui/icons-material": "^5.11.16", "@mui/joy": "5.0.0-alpha.72", "@mui/lab": "5.0.0-alpha.124", - "@mui/material": "^5.11.14", + "@mui/material": "^5.13.6", + "@mui/styled-engine-sc": "^5.12.0", "@mui/utils": "^5.11.13", "@prisma/client": "^4.12.0", "@types/node": "20.3.1", @@ -43,6 +44,7 @@ "react-hook-form": "^7.43.8", "react-markdown": "^8.0.7", "remark-gfm": "^3.0.1", + "styled-components": "^5.3.11", "swr": "^2.1.1", "tailwindcss": "3.3.2", "typescript": "5.1.3",