fix sandbox

Author: Francesca-Bit

packages/tdb-documents-ui/sandbox/src/.env_example

@@ -0,0 +1,9 @@
+import React, {useState} from 'react'
+import SyntaxHighlighter from 'react-syntax-highlighter'
+import { vs2015 } from 'react-syntax-highlighter/dist/esm/styles/hljs'
+
+export const DisplayCode = ({ codeString }) => {
+	return <SyntaxHighlighter language="javascript" style={vs2015} wrapLines={true}>
+		{codeString}
+	</SyntaxHighlighter>
+}

packages/tdb-documents-ui/sandbox/src/App.css

@@ -0,0 +1,40 @@
+import React, { useState } from "react"
+import { FrameObj } from "./frameInit"
+import Nav from 'react-bootstrap/Nav';
+
+export const DocumentTypes = () => {
+  const [activeKey, setActiveKey] = useState("Theme")
+  const {
+		frames,
+    setType
+	} = FrameObj()
+
+  if(!frames) return <div/>
+  let docTypes = []
+
+  function handleNavClick(selectedKey) {
+    setActiveKey(selectedKey)
+    setType(selectedKey)
+  }
+
+  for(let docs in frames) {
+    // display on classes 
+    if(frames[docs].hasOwnProperty("@type") && 
+      frames[docs]["@type"] === "Class" && 
+      !frames[docs].hasOwnProperty("@subdocument")) {
+        docTypes.push(<Nav.Item>
+          <Nav.Link eventKey={docs}>{docs}</Nav.Link>
+        </Nav.Item>)
+      }
+  }
+
+  return <Nav
+    activeKey={activeKey}
+    variant="pills"
+    className="mb-4"
+    onSelect={(selectedKey) => handleNavClick(selectedKey)}
+  >
+    {docTypes}
+  </Nav>
+
+}

packages/tdb-documents-ui/sandbox/src/App.js

@@ -0,0 +1,29 @@
+import React, { useEffect, useState } from "react"
+import Accordion from 'react-bootstrap/Accordion'
+import { SubmittedData } from "./SubmittedData"
+import { FrameEditor } from "./FrameEditor"
+
+
+export const Editor = () => {
+	const [activeKey, setActiveKey]=useState("Frames")
+
+	function handleSelect(key) {
+		setActiveKey(key)   
+	}
+
+	return <Accordion  onSelect={handleSelect}>
+		<Accordion.Item eventKey={"Frames"}>
+			<Accordion.Header className='bg-secondary'>{"Frames"}</Accordion.Header>
+			<Accordion.Body className='bg-secondary'>
+				<FrameEditor/>
+			</Accordion.Body>
+		</Accordion.Item>
+		<Accordion.Item eventKey={"Submitted Data"}>
+			<Accordion.Header className='bg-secondary'>{"Submitted Data"}</Accordion.Header>
+			<Accordion.Body className='bg-secondary'>
+				<SubmittedData/>
+			</Accordion.Body>
+		</Accordion.Item>
+	</Accordion>
+    
+}

packages/tdb-documents-ui/sandbox/src/DisplayCode.js

@@ -0,0 +1,28 @@
+import React from "react" 
+import { FrameObj } from "./frameInit"
+import JSONInput from 'react-json-editor-ajrm'
+import locale    from 'react-json-editor-ajrm/locale/en'
+ 
+export const FrameEditor = () => {
+	const {
+		frames,
+		setFrames 
+	} = FrameObj()
+
+	if(!frames) return <Loading/>
+
+	function handleInput (data) {
+		setFrames(data.jsObject)
+	}
+	if(!frames) return <div/>
+	//JSON Editor dimensions 
+	return <JSONInput
+		id='json_type_field'
+		locale={ locale }
+		placeholder={frames}
+		height= {"550px"}
+		width= {"380px"}
+		onBlur={handleInput}
+	/>
+
+}

packages/tdb-documents-ui/sandbox/src/DocumentTypes.js

@@ -0,0 +1,30 @@
+import React from 'react'
+import { Container, Row, Col, Stack } from 'react-bootstrap';
+import { View } from "./View"
+import { ModeBar } from "./ModeBar"
+import { DocumentTypes } from "./DocumentTypes"
+import { Editor } from './Editors';
+import { MoreInfo } from "./MoreInfoCanvas"
+ 
+const App= (props) =>{ 
+
+
+	return <Container fluid="xxl" className='mt-5'>
+		<h3 className='text-success'>{`Parts & Components Inventory`}</h3>
+		<h5 className='mb-4 text-muted'>{`This data product features Lego sets and their individual components and the relationships between them. 
+			It is an excellent example of organizations that have interconnected components and parts within their product offerings.`}
+		</h5>
+		<DocumentTypes/>
+		<MoreInfo/>
+		<Row>
+			<Col md={4}>
+				<ModeBar/>
+				<Editor/>
+			</Col>
+			<Col md={8}><View/></Col>
+		</Row>
+	</Container>
+	
+}
+
+export default App

packages/tdb-documents-ui/sandbox/src/Editors.js

@@ -0,0 +1,52 @@
+import React, { useState } from 'react'
+import Stack from 'react-bootstrap/Stack'
+import Offcanvas from 'react-bootstrap/Offcanvas'
+import { DisplayCode } from "./DisplayCode"
+import { Button } from "react-bootstrap"
+import { FrameObj } from "./frameInit"
+
+/**
+ * 
+ * @param {*} code - function is called to copy example code to clipboard 
+ */
+function copyToClipboard (code) {
+	navigator.clipboard.writeText(code).then(() => {
+			console.log("copied code", code)
+	},(err) => {
+	/* Rejected - clipboard failed */
+			console.log("err", err)
+	})
+}
+
+export const MoreInfo = () => {
+	const {
+		code,
+		setShowCode,
+		showCode
+	} = FrameObj()
+
+	//if(!showCode) return <div/>
+
+	const handleClose = () => setShowCode(false)
+
+	return <Offcanvas show={showCode} onHide={handleClose} key={"more-info"} placement={"end"} name={"more-info"} style={{width: "900px"}}>
+		<Offcanvas.Header closeButton className="bg-light text-dark">
+			<Offcanvas.Title>Code</Offcanvas.Title>
+		</Offcanvas.Header>
+		<Offcanvas.Body className='bg-secondary'>
+			<Stack direction="horizontal" gap={3} className="mt-4 mb-4">
+				{/*<h6>Click <a href={link}> here </a> to check out documentation</h6>*/}
+				<Button variant="primary" 
+					title="Copy to clipboard" 
+					className="btn btn-sm ms-auto"
+					style={{float: "right"}} 
+					onClick={(e) => copyToClipboard(code)}>
+						<label>Copy Code</label>
+				</Button>
+			</Stack>
+			<DisplayCode codeString={code}/>
+		</Offcanvas.Body>
+	</Offcanvas>
+}
+
+

packages/tdb-documents-ui/sandbox/src/FrameEditor.js

@@ -0,0 +1,17 @@
+import React from "react"
+import Row from "react-bootstrap/Row"
+
+/** component to display  */
+export const Search = ({ setSelected }) => {
+
+  function handleClick(e){
+    if(setSelected) setSelected({ id: e.target.id, label: e.target.name })
+  }
+ 
+  return <>
+    Search this dummy result ....
+    <Row className="w-100 border" id={"ID 1"} name="first id" onClick={handleClick}>{"ID 1"}</Row>
+    <Row className="w-100 border" id={"ID 2"} name="second id" onClick={handleClick}>{"ID 2"}</Row>
+    <Row className="w-100 border" id={"ID 3"} name="third id" onClick={handleClick}>{"ID 3"}</Row>
+</>
+}