Merge branch 'ref/typescript' of https://github.com/javascriptdata/dnotebook into ref/typescript

Author: risenW

.gitignore

@@ -0,0 +1,2 @@
+src/frontend/.env
+src/server/.env

README.md

@@ -10,37 +10,42 @@
 - Easily build, train and prototype machine learning models using different tools like Tensorflow.js
 - Learn JavaScript in an interactive/visual style. This can hasten learning and understanding.
 - Plain Experimentation/Prototyping. Any experimentation performed in JavaScript can run on Dnotebooks.
+## Tech stack
+* [Next.js](https://nextjs.org/)
+* React
+* [Material UI](https://mui.com/)
+* [Tailwind CSS](https://tailwindcss.com/)
+* Express 
 
+## Developers
 
-### How to install
-Dnotebook is hosted on NPM, and can installed via package managers like npm and yarn
-
+* Clone the repo
 ```sh
-npm install -g dnotebook
+git clone https://github.com/javascriptdata/dnotebook.git
+cd dnotebook
+git checkout ref/typescript
 ```
 
-### Example usage
-After installing dnotebook, you can start the server by running the command `dnotebook` in the terminal. This opens a new notebook in your default browser.
-
-
-![](assets/test-dnotes.gif)
-
+* Install packages with `yarn`. `yarn` is our preferred package manager
 
-You can download the notebook shown above [here](assets/test-notebook.json). To view and interact with the notebook without installing anything, go to [playnotebook.jsdata.org](https://playnotebook.jsdata.org/demo).
+```sh
+yarn install
+```
+* Run the app in dev mode
 
-#### [See the Official Getting Started Guide](https://dnotebook.jsdata.org/getting-started)
+```sh
+yarn dev
+```
 
+* Open your browser and navigate to `http://localhost:3000/`
 
-<!-- ## Documentation
-The official documentation can be found [here](https://danfo.jsdata.org) -->
 
 ### Discussion and Development
-Development discussions take place on our [issues](https://github.com/opensource9ja/dnotebook/issues) tab. 
+Development discussions take place on our [issues](https://github.com/javascriptdata/dnotebook/issues/10) tab. 
 
 ### Contributing to Dnotebook
 All contributions, bug reports, bug fixes, documentation improvements, enhancements, and ideas are welcome.
 
 #### Licence [MIT](https://github.com/opensource9ja/dnotebook/blob/master/LICENCE)
 
-#### Created by [Rising Odegua](https://github.com/risenW) and [Stephen Oni](https://github.com/steveoni)
 

package.json

@@ -6,14 +6,17 @@
   "contributors": [
     {
       "name": "Rising Odegua"
-    },
-    {
-      "name": "Stephen Oni"
     }
   ],
   "files": [
     "dnotebook/"
   ],
+  "scripts": {
+    "install": "cd src/frontend && yarn && cd ../server && yarn",
+    "build": "cd src/frontend && yarn build && cd ../server && yarn build",
+    "dev": "cd src/frontend && yarn dev && cd ../server && yarn dev",
+    "start": "cd src/frontend && yarn start && cd ../server && yarn start"
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/opensource9ja/dnotebook.git"

src/frontend/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

src/frontend/.gitignore

@@ -0,0 +1,37 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+node_modules/*
+.pnp
+.pnp.js
+
+# testing
+coverage
+
+# next.js
+.next/
+out/
+
+# production
+build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo

src/frontend/README.md

@@ -0,0 +1,34 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

src/frontend/components/Cell/index.tsx

@@ -0,0 +1,120 @@
+import CellEditor from "../CellEditor";
+import CellOutputRenderer from "../CellOutputRenderer";
+import { useDispatch, useSelector } from "react-redux";
+import { useState } from "react";
+import NodejsInterpreter from '../../lib/interpreter/server'
+import { outputError, NbCell, AppState } from '../../lib/typings/types'
+import IconButton from '@mui/material/IconButton';
+import SendIcon from '@mui/icons-material/Send';
+import LoadingButton from '@mui/lab/LoadingButton';
+import CellOptionsBar from "../MenuBar/cellOptions"
+import { updateCells } from "../../lib/state/reducer"
+import { cleanErrorMessage } from "../../lib/helpers/utils"
+
+const NoteBookCell = ({ cell }: { cell: NbCell }) => {
+    const dispatch = useDispatch();
+    const { notebooks, activeNotebookName, interpreterMode } = useSelector((state: { app: AppState }) => state.app)
+    const notebook = notebooks[activeNotebookName]
+    const { cells } = notebook
+
+
+    const [cellIsRunning, setCellIsRunning] = useState(false)
+    const [output, setOutput] = useState("")
+    const [outputError, setOutputError] = useState("")
+    const [hasError, setHasError] = useState(false)
+
+
+    const cellRunCallback = (accumulatedResult: string | outputError, hasErrors: boolean) => {
+
+        if (hasErrors) {
+            setHasError(true)
+            const fullErrorMessage = cleanErrorMessage(accumulatedResult as outputError)
+            setOutputError(fullErrorMessage)
+
+            const newCurrCell = { ...cell, output: "", outputError: fullErrorMessage }
+            const newCells = { ...cells, [cell.id]: newCurrCell }
+            dispatch(updateCells({ newCells, activeNotebookName }))
+
+        } else {
+            setHasError(false)
+            setOutput(accumulatedResult as string)
+
+            const newCurrCell = { ...cell, output: accumulatedResult as string, outputError: "" }
+            const newCells = { ...cells, [cell.id]: newCurrCell }
+            dispatch(updateCells({ newCells, activeNotebookName }))
+
+        }
+
+        setCellIsRunning(false)
+
+    }
+
+    const handleCellRun = () => {
+        const content = cell.content
+        const language = cell.mode
+
+        if (!content || content.trim() === '') {
+            return
+        }
+        setCellIsRunning(true)
+        setOutput("")
+        setOutputError("")
+
+        if (interpreterMode === 'node') {
+            NodejsInterpreter.exec({ content, language, callback: cellRunCallback, activeNotebookName })
+                .catch((error) => {
+                    setOutputError({
+                        ...error,
+                    })
+                    console.log(error)
+                    setCellIsRunning(false)
+                })
+        } else {
+            //execute in browser context
+            console.log('browser')
+        }
+    }
+
+    const handleKeyPress = (e: any) => {
+        if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
+            handleCellRun()
+        }
+    }
+
+    return (
+        <section>
+            <section className="grid grid-rows-1 text-right">
+                <CellOptionsBar cell={cell} />
+            </section>
+            <section className="grid grid-cols-12">
+                <div className="col-span-1 text-right">
+                    {
+                        cellIsRunning ? (
+                            <LoadingButton loading ></LoadingButton>
+
+                        ) : (
+                            <IconButton
+                                aria-label="delete"
+                                onClick={() => handleCellRun()}
+                                color="primary"
+                            >
+                                <SendIcon />
+                            </IconButton>
+                        )
+                    }
+
+                </div>
+
+                <div className="col-span-11"
+                    onKeyPress={handleKeyPress}
+                >
+                    <CellEditor cell={cell} />
+                    <CellOutputRenderer cell={cell} />
+                </div>
+
+            </section>
+        </section>
+    )
+}
+
+export default NoteBookCell;

src/frontend/components/CellEditor/index.tsx

@@ -0,0 +1,68 @@
+import dynamic from "next/dynamic";
+import { useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { updateCells } from "../../lib/state/reducer"
+import { AppState, NbCell } from "../../lib/typings/types";
+
+const AceEditor = dynamic(
+    async () => {
+        const editor = await import('react-ace');
+        const ace = await import('ace-builds/src-noconflict/ace');
+        /** @ts-ignore */
+        import('brace/ext/language_tools'); //Add support for auto complete and snippets
+        ace.config.set("basePath", "/ace-builds-public-export");
+        return editor;
+    },
+    {
+        loading: () => (
+            <div></div>
+        ),
+        ssr: false,
+    },
+);
+
+
+const Editor = ({ cell }: { cell: NbCell }) => {
+    const dispatch = useDispatch();
+
+    const { notebooks, activeNotebookName, config } = useSelector((state: { app: AppState }) => state.app)
+    const notebook = notebooks[activeNotebookName]
+    const { cells } = notebook
+
+    const [code, updateCode] = useState(cell?.content);
+
+    const handleCodeChange = (newCode: any) => {
+        updateCode(newCode);
+        const newCurrCell = { ...cell, content: newCode }
+
+        const newCells = { ...cells, [cell.id]: newCurrCell }
+        dispatch(updateCells({ newCells, activeNotebookName }))
+    }
+    
+    return (
+        <AceEditor
+            mode={cell.mode}
+            theme={config.cellTheme}
+            value={code}
+            onChange={handleCodeChange}
+            fontSize={config.cellFontSize}
+            width={config.width}
+            style={{
+                margin: "2px"
+            }}
+            maxLines={Infinity}
+            cursorStart={1}
+            minLines={4}
+            wrapEnabled={true}
+            setOptions={{
+                enableBasicAutocompletion: config.cellEnableBasicAutocompletion,
+                enableLiveAutocompletion: config.cellEnableLiveAutocompletion,
+                enableSnippets: config.cellEnableSnippets,
+                showLineNumbers: config.cellShowLineNumbers,
+                tabSize: config.cellTabSize,
+            }}
+        />
+    );
+};
+
+export default Editor;

src/frontend/components/CellOutputRenderer/index.tsx

@@ -0,0 +1,18 @@
+import { NbCell } from "../../lib/typings/types";
+
+
+const cellOutputRenderer = ({ cell }: { cell: NbCell }) => {
+    return (
+        <div>
+            {cell.outputError !== "" ? (
+                <div className="text-red-400 p-3" dangerouslySetInnerHTML={{ __html: cell.outputError }}></div>
+            ) : (
+                <div>
+                    <div className="p-3" dangerouslySetInnerHTML={{ __html: cell.output }}></div>
+                </div>
+            )}
+        </div>
+    )
+}
+
+export default cellOutputRenderer;