Demo branch adding JSCAD type, without implementing the render

Related to #411

app/web/src/components/IdeEditor/IdeEditor.tsx

@@ -4,6 +4,8 @@ import { makeCodeStoreKey, requestRender } from 'src/helpers/hooks/useIdeState'
 import Editor, { useMonaco } from '@monaco-editor/react'
 import { theme } from 'src/../tailwind.config'
 import { useSaveCode } from 'src/components/IdeWrapper/useSaveCode'
+import type { CadPackage as CadPackageType } from 'src/helpers/hooks/useIdeState'
+import CadPackage from '../CadPackage/CadPackage'
 
 const colors = theme.extend.colors
 
@@ -12,9 +14,10 @@ const IdeEditor = ({ Loading }) => {
   const [theme, setTheme] = useState('vs-dark')
   const saveCode = useSaveCode()
 
-  const ideTypeToLanguageMap = {
+  const ideTypeToLanguageMap: {[key in CadPackageType]: string} = {
     cadquery: 'python',
     openscad: 'cpp',
+    jscad: 'javascript',
   }
   const monaco = useMonaco()
   useEffect(() => {

app/web/src/components/NavPlusButton/NavPlusButton.tsx

@@ -1,6 +1,22 @@
 import { Link, routes } from '@redwoodjs/router'
 import Svg from 'src/components/Svg/Svg'
 import { Popover } from '@headlessui/react'
+import type { CadPackage } from 'src/helpers/hooks/useIdeState'
+
+
+const menuOptions: {
+  name: string
+  sub: string
+  ideType: CadPackage
+}[] = [
+  {
+    name: 'OpenSCAD',
+    sub: 'beta',
+    ideType: 'openscad',
+  },
+  { name: 'CadQuery', sub: 'beta', ideType: 'cadquery' },
+  // { name: 'JSCAD', sub: 'alpha', ideType: 'jscad' }, // TODO #422, add jscad to db schema when were ready to enable saving of jscad projects
+]
 
 const NavPlusButton: React.FC = () => {
   return (
@@ -11,14 +27,7 @@ const NavPlusButton: React.FC = () => {
 
       <Popover.Panel className="absolute z-10 right-0">
         <ul className="bg-gray-200 mt-4 rounded shadow-md overflow-hidden">
-          {[
-            {
-              name: 'OpenSCAD',
-              sub: 'beta',
-              ideType: 'openscad',
-            },
-            { name: 'CadQuery', sub: 'beta', ideType: 'cadquery' },
-          ].map(({ name, sub, ideType }) => (
+          {menuOptions.map(({ name, sub, ideType }) => (
             <li
               key={name}
               className="px-4 py-2 hover:bg-gray-400 text-gray-800"