From 38116d252a73f59d80b447f48be48c19841a23d4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20Gessler?= <36667834+gessfred@users.noreply.github.com> Date: Sun, 14 Jan 2024 21:03:17 +0000 Subject: [PATCH] implement home skeleton with tailwind --- app/package-lock.json | 227 +++++++++++++++- app/package.json | 5 +- app/src/App.jsx | 20 +- app/src/components/Chart.jsx | 0 app/src/components/Code.jsx | 37 +++ app/src/components/DataSourceGrid.jsx | 59 +++++ app/src/components/FilesExplorer.jsx | 158 ++++++++++++ app/src/components/Table.jsx | 0 app/src/pages/ConnectionEditor.jsx | 16 +- app/src/pages/Home.jsx | 26 +- app/src/pages/Worksheet.jsx | 356 ++++++++++++++++++++++++++ 11 files changed, 880 insertions(+), 24 deletions(-) create mode 100644 app/src/components/Chart.jsx create mode 100644 app/src/components/Code.jsx create mode 100644 app/src/components/DataSourceGrid.jsx create mode 100644 app/src/components/FilesExplorer.jsx create mode 100644 app/src/components/Table.jsx create mode 100644 app/src/pages/Worksheet.jsx diff --git a/app/package-lock.json b/app/package-lock.json index e5aac93..009bcfc 100644 --- a/app/package-lock.json +++ b/app/package-lock.json @@ -8,10 +8,13 @@ "name": "app", "version": "0.0.0", "dependencies": { + "@codemirror/lang-sql": "^6.5.5", "@headlessui/react": "^1.7.18", "@heroicons/react": "^2.1.1", + "@uiw/react-codemirror": "^4.21.21", "react": "^18.2.0", - "react-dom": "^18.2.0" + "react-dom": "^18.2.0", + "uniqid": "^5.4.0" }, "devDependencies": { "@tailwindcss/forms": "^0.5.7", @@ -340,6 +343,17 @@ "@babel/core": "^7.0.0-0" } }, + "node_modules/@babel/runtime": { + "version": "7.23.8", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.8.tgz", + "integrity": "sha512-Y7KbAP984rn1VGMbGqKmBLio9V7y5Je9GvU4rQPCPinCyNfUcToxIXl06d59URp/F3LwinvODxab5N/G6qggkw==", + "dependencies": { + "regenerator-runtime": "^0.14.0" + }, + "engines": { + "node": ">=6.9.0" + } + }, "node_modules/@babel/template": { "version": "7.22.15", "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.15.tgz", @@ -389,6 +403,106 @@ "node": ">=6.9.0" } }, + "node_modules/@codemirror/autocomplete": { + "version": "6.12.0", + "resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.12.0.tgz", + "integrity": "sha512-r4IjdYFthwbCQyvqnSlx0WBHRHi8nBvU+WjJxFUij81qsBfhNudf/XKKmmC2j3m0LaOYUQTf3qiEK1J8lO1sdg==", + "dependencies": { + "@codemirror/language": "^6.0.0", + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.17.0", + "@lezer/common": "^1.0.0" + }, + "peerDependencies": { + "@codemirror/language": "^6.0.0", + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.0.0", + "@lezer/common": "^1.0.0" + } + }, + "node_modules/@codemirror/commands": { + "version": "6.3.3", + "resolved": "https://registry.npmjs.org/@codemirror/commands/-/commands-6.3.3.tgz", + "integrity": "sha512-dO4hcF0fGT9tu1Pj1D2PvGvxjeGkbC6RGcZw6Qs74TH+Ed1gw98jmUgd2axWvIZEqTeTuFrg1lEB1KV6cK9h1A==", + "dependencies": { + "@codemirror/language": "^6.0.0", + "@codemirror/state": "^6.4.0", + "@codemirror/view": "^6.0.0", + "@lezer/common": "^1.1.0" + } + }, + "node_modules/@codemirror/lang-sql": { + "version": "6.5.5", + "resolved": "https://registry.npmjs.org/@codemirror/lang-sql/-/lang-sql-6.5.5.tgz", + "integrity": "sha512-DvOaP2RXLb2xlxJxxydTFfwyYw5YDqEFea6aAfgh9UH0kUD6J1KFZ0xPgPpw1eo/5s2w3L6uh5PVR7GM23GxkQ==", + "dependencies": { + "@codemirror/autocomplete": "^6.0.0", + "@codemirror/language": "^6.0.0", + "@codemirror/state": "^6.0.0", + "@lezer/common": "^1.2.0", + "@lezer/highlight": "^1.0.0", + "@lezer/lr": "^1.0.0" + } + }, + "node_modules/@codemirror/language": { + "version": "6.10.0", + "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.10.0.tgz", + "integrity": "sha512-2vaNn9aPGCRFKWcHPFksctzJ8yS5p7YoaT+jHpc0UGKzNuAIx4qy6R5wiqbP+heEEdyaABA582mNqSHzSoYdmg==", + "dependencies": { + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.23.0", + "@lezer/common": "^1.1.0", + "@lezer/highlight": "^1.0.0", + "@lezer/lr": "^1.0.0", + "style-mod": "^4.0.0" + } + }, + "node_modules/@codemirror/lint": { + "version": "6.4.2", + "resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.4.2.tgz", + "integrity": "sha512-wzRkluWb1ptPKdzlsrbwwjYCPLgzU6N88YBAmlZi8WFyuiEduSd05MnJYNogzyc8rPK7pj6m95ptUApc8sHKVA==", + "dependencies": { + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.0.0", + "crelt": "^1.0.5" + } + }, + "node_modules/@codemirror/search": { + "version": "6.5.5", + "resolved": "https://registry.npmjs.org/@codemirror/search/-/search-6.5.5.tgz", + "integrity": "sha512-PIEN3Ke1buPod2EHbJsoQwlbpkz30qGZKcnmH1eihq9+bPQx8gelauUwLYaY4vBOuBAuEhmpDLii4rj/uO0yMA==", + "dependencies": { + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.0.0", + "crelt": "^1.0.5" + } + }, + "node_modules/@codemirror/state": { + "version": "6.4.0", + "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.4.0.tgz", + "integrity": "sha512-hm8XshYj5Fo30Bb922QX9hXB/bxOAVH+qaqHBzw5TKa72vOeslyGwd4X8M0c1dJ9JqxlaMceOQ8RsL9tC7gU0A==" + }, + "node_modules/@codemirror/theme-one-dark": { + "version": "6.1.2", + "resolved": "https://registry.npmjs.org/@codemirror/theme-one-dark/-/theme-one-dark-6.1.2.tgz", + "integrity": "sha512-F+sH0X16j/qFLMAfbciKTxVOwkdAS336b7AXTKOZhy8BR3eH/RelsnLgLFINrpST63mmN2OuwUt0W2ndUgYwUA==", + "dependencies": { + "@codemirror/language": "^6.0.0", + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.0.0", + "@lezer/highlight": "^1.0.0" + } + }, + "node_modules/@codemirror/view": { + "version": "6.23.0", + "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.23.0.tgz", + "integrity": "sha512-/51px9N4uW8NpuWkyUX+iam5+PM6io2fm+QmRnzwqBy5v/pwGg9T0kILFtYeum8hjuvENtgsGNKluOfqIICmeQ==", + "dependencies": { + "@codemirror/state": "^6.4.0", + "style-mod": "^4.1.0", + "w3c-keyname": "^2.2.4" + } + }, "node_modules/@esbuild/aix-ppc64": { "version": "0.19.11", "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.19.11.tgz", @@ -977,6 +1091,27 @@ "@jridgewell/sourcemap-codec": "^1.4.14" } }, + "node_modules/@lezer/common": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.2.0.tgz", + "integrity": "sha512-Wmvlm4q6tRpwiy20TnB3yyLTZim38Tkc50dPY8biQRwqE+ati/wD84rm3N15hikvdT4uSg9phs9ubjvcLmkpKg==" + }, + "node_modules/@lezer/highlight": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@lezer/highlight/-/highlight-1.2.0.tgz", + "integrity": "sha512-WrS5Mw51sGrpqjlh3d4/fOwpEV2Hd3YOkp9DBt4k8XZQcoTHZFB7sx030A6OcahF4J1nDQAa3jXlTVVYH50IFA==", + "dependencies": { + "@lezer/common": "^1.0.0" + } + }, + "node_modules/@lezer/lr": { + "version": "1.3.14", + "resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.3.14.tgz", + "integrity": "sha512-z5mY4LStlA3yL7aHT/rqgG614cfcvklS+8oFRFBYrs4YaWLJyKKM4+nN6KopToX0o9Hj6zmH6M5kinOYuy06ug==", + "dependencies": { + "@lezer/common": "^1.0.0" + } + }, "node_modules/@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", @@ -1307,6 +1442,57 @@ "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==", "dev": true }, + "node_modules/@uiw/codemirror-extensions-basic-setup": { + "version": "4.21.21", + "resolved": "https://registry.npmjs.org/@uiw/codemirror-extensions-basic-setup/-/codemirror-extensions-basic-setup-4.21.21.tgz", + "integrity": "sha512-+0i9dPrRSa8Mf0CvyrMvnAhajnqwsP3IMRRlaHDRgsSGL8igc4z7MhvUPn+7cWFAAqWzQRhMdMSWzo6/TEa3EA==", + "dependencies": { + "@codemirror/autocomplete": "^6.0.0", + "@codemirror/commands": "^6.0.0", + "@codemirror/language": "^6.0.0", + "@codemirror/lint": "^6.0.0", + "@codemirror/search": "^6.0.0", + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.0.0" + }, + "funding": { + "url": "https://jaywcjlove.github.io/#/sponsor" + }, + "peerDependencies": { + "@codemirror/autocomplete": ">=6.0.0", + "@codemirror/commands": ">=6.0.0", + "@codemirror/language": ">=6.0.0", + "@codemirror/lint": ">=6.0.0", + "@codemirror/search": ">=6.0.0", + "@codemirror/state": ">=6.0.0", + "@codemirror/view": ">=6.0.0" + } + }, + "node_modules/@uiw/react-codemirror": { + "version": "4.21.21", + "resolved": "https://registry.npmjs.org/@uiw/react-codemirror/-/react-codemirror-4.21.21.tgz", + "integrity": "sha512-PaxBMarufMWoR0qc5zuvBSt76rJ9POm9qoOaJbqRmnNL2viaF+d+Paf2blPSlm1JSnqn7hlRjio+40nZJ9TKzw==", + "dependencies": { + "@babel/runtime": "^7.18.6", + "@codemirror/commands": "^6.1.0", + "@codemirror/state": "^6.1.1", + "@codemirror/theme-one-dark": "^6.0.0", + "@uiw/codemirror-extensions-basic-setup": "4.21.21", + "codemirror": "^6.0.0" + }, + "funding": { + "url": "https://jaywcjlove.github.io/#/sponsor" + }, + "peerDependencies": { + "@babel/runtime": ">=7.11.0", + "@codemirror/state": ">=6.0.0", + "@codemirror/theme-one-dark": ">=6.0.0", + "@codemirror/view": ">=6.0.0", + "codemirror": ">=6.0.0", + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + } + }, "node_modules/@ungap/structured-clone": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz", @@ -1760,6 +1946,20 @@ "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz", "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==" }, + "node_modules/codemirror": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-6.0.1.tgz", + "integrity": "sha512-J8j+nZ+CdWmIeFIGXEFbFPtpiYacFMDR8GlHK3IyHQJMCaVRfGx9NT+Hxivv1ckLWPvNdZqndbr/7lVhrf/Svg==", + "dependencies": { + "@codemirror/autocomplete": "^6.0.0", + "@codemirror/commands": "^6.0.0", + "@codemirror/language": "^6.0.0", + "@codemirror/lint": "^6.0.0", + "@codemirror/search": "^6.0.0", + "@codemirror/state": "^6.0.0", + "@codemirror/view": "^6.0.0" + } + }, "node_modules/color-convert": { "version": "1.9.3", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", @@ -1796,6 +1996,11 @@ "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==", "dev": true }, + "node_modules/crelt": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.6.tgz", + "integrity": "sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==" + }, "node_modules/cross-spawn": { "version": "7.0.3", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", @@ -4089,6 +4294,11 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/regenerator-runtime": { + "version": "0.14.1", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz", + "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==" + }, "node_modules/regexp.prototype.flags": { "version": "1.5.1", "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.1.tgz", @@ -4513,6 +4723,11 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/style-mod": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/style-mod/-/style-mod-4.1.0.tgz", + "integrity": "sha512-Ca5ib8HrFn+f+0n4N4ScTIA9iTOQ7MaGS1ylHcoVqW9J7w2w8PzN6g9gKmTYgGEBH8e120+RCmhpje6jC5uGWA==" + }, "node_modules/sucrase": { "version": "3.35.0", "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz", @@ -4817,6 +5032,11 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/uniqid": { + "version": "5.4.0", + "resolved": "https://registry.npmjs.org/uniqid/-/uniqid-5.4.0.tgz", + "integrity": "sha512-38JRbJ4Fj94VmnC7G/J/5n5SC7Ab46OM5iNtSstB/ko3l1b5g7ALt4qzHFgGciFkyiRNtDXtLNb+VsxtMSE77A==" + }, "node_modules/update-browserslist-db": { "version": "1.0.13", "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz", @@ -4917,6 +5137,11 @@ } } }, + "node_modules/w3c-keyname": { + "version": "2.2.8", + "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz", + "integrity": "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==" + }, "node_modules/which": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", diff --git a/app/package.json b/app/package.json index 1c72cdc..89f03cf 100644 --- a/app/package.json +++ b/app/package.json @@ -10,10 +10,13 @@ "preview": "vite preview" }, "dependencies": { + "@codemirror/lang-sql": "^6.5.5", "@headlessui/react": "^1.7.18", "@heroicons/react": "^2.1.1", + "@uiw/react-codemirror": "^4.21.21", "react": "^18.2.0", - "react-dom": "^18.2.0" + "react-dom": "^18.2.0", + "uniqid": "^5.4.0" }, "devDependencies": { "@tailwindcss/forms": "^0.5.7", diff --git a/app/src/App.jsx b/app/src/App.jsx index fb4f232..f075800 100644 --- a/app/src/App.jsx +++ b/app/src/App.jsx @@ -3,6 +3,7 @@ import reactLogo from './assets/react.svg' import viteLogo from '/vite.svg' import './App.css' import Home from './pages/Home' +import Worksheet from './pages/Worksheet' function API(url, user) { const call = (verb, route, callbacks, body) => { @@ -209,15 +210,6 @@ function Signin({api, show, onLogin}) { ) } -/*function Home({show}) { - if(!show) return - return ( -
-

Home

-
- ) -}*/ - function App() { const [count, setCount] = useState(0) const [state, setState] = useState({pageid: 'login'}) @@ -239,8 +231,14 @@ function App() { setState({user: user, pageid: 'main'}) }} /> - setStateProperty({pageid: 'worksheet'})} + /> + ) diff --git a/app/src/components/Chart.jsx b/app/src/components/Chart.jsx new file mode 100644 index 0000000..e69de29 diff --git a/app/src/components/Code.jsx b/app/src/components/Code.jsx new file mode 100644 index 0000000..dc7a6e1 --- /dev/null +++ b/app/src/components/Code.jsx @@ -0,0 +1,37 @@ +import { useRef, useEffect } from 'react' +import CodeMirror from '@uiw/react-codemirror' +import { sql } from '@codemirror/lang-sql' + +export function CodeEditor({code, setCode, onCtrlEnter}) { + /*return ( +
console.log(e.target.value)}> + {code} +
+ )*/ + //if(!onCtrlEnter) onCtrlEnter = () => {} + const sqlEditorRef = useRef(null) + useEffect(() => { + if(sqlEditorRef.current) { + console.log("attaching") + const cm = sqlEditorRef.current + cm.on('keydown', (editor, event) => { + if (event.ctrlKey && event.keyCode === 13) { // 13 is the keyCode for Enter + console.log("ctrl+key") + } + }) + } + }, []) + return ( + setCode(code)} + height='500px' + basicSetup={{lineNumbers: false}} + extensions={[sql()]} + options={{ + extraKeys: { + 'Ctrl-Enter': (cm) => console.log("ctrl+enter") + }}} + /> + ) +} \ No newline at end of file diff --git a/app/src/components/DataSourceGrid.jsx b/app/src/components/DataSourceGrid.jsx new file mode 100644 index 0000000..2aacbf2 --- /dev/null +++ b/app/src/components/DataSourceGrid.jsx @@ -0,0 +1,59 @@ +import { CodeBracketIcon, AdjustmentsHorizontalIcon } from '@heroicons/react/20/solid' + +const people = [ + { + name: 'Jane Cooper', + title: 'Regional Paradigm Technician', + role: 'Admin', + email: 'janecooper@example.com', + telephone: '+1-202-555-0170', + imageUrl: + 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=4&w=256&h=256&q=60', + }, + // More people... +] + +export default function DataSourceGrid({datasources, createWorksheet, editDataSource}) { + return ( +
    + {(datasources || []).map((ds) => ( +
  • +
    +
    +
    +

    {ds.name}

    + + {ds.name} + +
    +

    {ds.name}

    +
    + +
    +
    +
    +
    + +
    +
    + +
    +
    +
    +
    • + ))} +
+ ) +} diff --git a/app/src/components/FilesExplorer.jsx b/app/src/components/FilesExplorer.jsx new file mode 100644 index 0000000..7860310 --- /dev/null +++ b/app/src/components/FilesExplorer.jsx @@ -0,0 +1,158 @@ +import { Fragment } from 'react' +import { Menu, Transition } from '@headlessui/react' +import { EllipsisVerticalIcon } from '@heroicons/react/20/solid' + +const statuses = { + Complete: 'text-green-700 bg-green-50 ring-green-600/20', + 'In progress': 'text-gray-600 bg-gray-50 ring-gray-500/10', + Archived: 'text-yellow-800 bg-yellow-50 ring-yellow-600/20', +} +const projects = [ + { + id: 1, + name: 'GraphQL API', + href: '#', + status: 'Complete', + createdBy: 'Leslie Alexander', + dueDate: 'March 17, 2023', + dueDateTime: '2023-03-17T00:00Z', + }, + { + id: 2, + name: 'New benefits plan', + href: '#', + status: 'In progress', + createdBy: 'Leslie Alexander', + dueDate: 'May 5, 2023', + dueDateTime: '2023-05-05T00:00Z', + }, + { + id: 3, + name: 'Onboarding emails', + href: '#', + status: 'In progress', + createdBy: 'Courtney Henry', + dueDate: 'May 25, 2023', + dueDateTime: '2023-05-25T00:00Z', + }, + { + id: 4, + name: 'iOS app', + href: '#', + status: 'In progress', + createdBy: 'Leonard Krasner', + dueDate: 'June 7, 2023', + dueDateTime: '2023-06-07T00:00Z', + }, + { + id: 5, + name: 'Marketing site redesign', + href: '#', + status: 'Archived', + createdBy: 'Courtney Henry', + dueDate: 'June 10, 2023', + dueDateTime: '2023-06-10T00:00Z', + }, +] + +function classNames(...classes) { + return classes.filter(Boolean).join(' ') +} + +export default function FilesExplorer({files}) { + return ( + + ) +} diff --git a/app/src/components/Table.jsx b/app/src/components/Table.jsx new file mode 100644 index 0000000..e69de29 diff --git a/app/src/pages/ConnectionEditor.jsx b/app/src/pages/ConnectionEditor.jsx index 9cd2281..5e6b5ea 100644 --- a/app/src/pages/ConnectionEditor.jsx +++ b/app/src/pages/ConnectionEditor.jsx @@ -2,7 +2,7 @@ import { Fragment, useRef, useState } from 'react' import { Dialog, Transition } from '@headlessui/react' import { ExclamationTriangleIcon } from '@heroicons/react/24/outline' import Dropdown from '../components/Dropdown' -//import uniqid from 'uniqid' +import uniqid from 'uniqid' const engines = [ { @@ -62,15 +62,17 @@ export function Input({name, value, setValue}) { ) } -export default function ConnectionEditor({api, show, onHide}) { +export default function ConnectionEditor({api, show, onHide, onCreate}) { const [open, setOpen] = useState(true) const [connection, setConnection] = useState({engine: engines[0]}) const cancelButtonRef = useRef(null) const setConnectionProperty = property => value => setConnection(prev => Object.assign({}, prev, {[property]: value})) - + const createConnection = () => { + api.userdata.datasources.write(Object.assign({}, connection, {datasource_id: uniqid()})) + } return ( - - + + setOpen(false)} + onClick={createConnection} ref={cancelButtonRef} > Create @@ -124,7 +126,7 @@ export default function ConnectionEditor({api, show, onHide}) { diff --git a/app/src/pages/Home.jsx b/app/src/pages/Home.jsx index 67af2ab..386d798 100644 --- a/app/src/pages/Home.jsx +++ b/app/src/pages/Home.jsx @@ -1,7 +1,9 @@ -import { Fragment, useState } from 'react' +import { Fragment, useState, useEffect } from 'react' import { Disclosure, Menu, Transition } from '@headlessui/react' import { Bars3Icon, BellIcon, XMarkIcon } from '@heroicons/react/24/outline' import ConnectionEditor from './ConnectionEditor' +import DataSourceGrid from '../components/DataSourceGrid' +import FilesExplorer from '../components/FilesExplorer' const user = { name: 'Tom Cook', @@ -26,8 +28,15 @@ const user = { return classes.filter(Boolean).join(' ') } - export default function Home({show}) { - const [state, setState] = useState({showConnectionEditor: false}) + export default function Home({show, api, createWorksheet}) { + const [state, setState] = useState({notebooks: [], datasources: [], showConnectionEditor: false, worksheets: []}) + useEffect(() => { + if(api.auth.authenticated) { + api.userdata.datasources.read(datasources => setState(prev => Object.assign({}, prev, {datasources: datasources || []}))) + api.userdata.notebooks.read(nbs => setState(prev => Object.assign({}, prev, {notebooks: nbs || []}))) + } + }, [api.auth.authenticated]) + console.log(state) if(!show) return return ( <> @@ -194,8 +203,17 @@ const user = {
+

Data Sources

+
+ +
- {}} /> + {}} /> +

Files

+
diff --git a/app/src/pages/Worksheet.jsx b/app/src/pages/Worksheet.jsx new file mode 100644 index 0000000..a3c5f41 --- /dev/null +++ b/app/src/pages/Worksheet.jsx @@ -0,0 +1,356 @@ +import { CodeEditor } from "../components/Code" +import { Fragment, useState } from 'react' +import { Dialog, Menu, Transition } from '@headlessui/react' +import { + Bars3Icon, + BellIcon, + CalendarIcon, + ChartPieIcon, + Cog6ToothIcon, + DocumentDuplicateIcon, + FolderIcon, + HomeIcon, + UsersIcon, + XMarkIcon, +} from '@heroicons/react/24/outline' +import { ChevronDownIcon, MagnifyingGlassIcon } from '@heroicons/react/20/solid' + +const navigation = [ + { name: 'Dashboard', href: '#', icon: HomeIcon, current: true }, + { name: 'Team', href: '#', icon: UsersIcon, current: false }, + { name: 'Projects', href: '#', icon: FolderIcon, current: false }, + { name: 'Calendar', href: '#', icon: CalendarIcon, current: false }, + { name: 'Documents', href: '#', icon: DocumentDuplicateIcon, current: false }, + { name: 'Reports', href: '#', icon: ChartPieIcon, current: false }, +] +const teams = [ + { id: 1, name: 'Heroicons', href: '#', initial: 'H', current: false }, + { id: 2, name: 'Tailwind Labs', href: '#', initial: 'T', current: false }, + { id: 3, name: 'Workcation', href: '#', initial: 'W', current: false }, +] +const userNavigation = [ + { name: 'Your profile', href: '#' }, + { name: 'Sign out', href: '#' }, +] + +function classNames(...classes) { + return classes.filter(Boolean).join(' ') +} + +function Sidebar({children}) { + const [sidebarOpen, setSidebarOpen] = useState(false) + return ( + <> + {/* + This example requires updating your template: + + ``` + + + ``` + */} +
+ + + +
+ + +
+ + + +
+ +
+ + {/* Sidebar component, swap this element with another sidebar if you like */} +
+
+ Your Company +
+ +
+ + +
+
+ + + {/* Static sidebar for desktop */} +
+ {/* Sidebar component, swap this element with another sidebar if you like */} +
+
+ Your Company +
+ +
+
+ +
+
+ + + {/* Separator */} + +
+ + ) +} + +export default function Worksheet({show}) { + if(!show) return + return ( + + + + ) +} \ No newline at end of file