Completed initial CAD package guides, tweaked initial code import

2021-09-18 23:16:43 -04:00
parent 2f006d3e3b
commit b27bcd2d35
17 changed files with 297 additions and 139 deletions
--- a/app/web/src/components/CadPackage/CadPackage.tsx
+++ b/app/web/src/components/CadPackage/CadPackage.tsx
@@ -1,43 +1,63 @@
-export type CadPackageType = 'openscad' | 'cadquery' | 'jscad'
+export type CadPackageType = 'openscad' | 'cadquery' | 'jscad' | 'INIT'

-export const ideTypeNameMap: { [key in CadPackageType]: string } = {
-  openscad: 'OpenSCAD',
-  cadquery: 'CadQuery',
-  jscad: 'JSCAD',
+interface CadPackageConfig {
+  label: string
+  buttonClasses: string
+  dotClasses: string
 }

+export const cadPackageConfigs: { [key in CadPackageType]: CadPackageConfig } =
+  {
+    openscad: {
+      label: 'OpenSCAD',
+      buttonClasses: 'bg-yellow-800',
+      dotClasses: 'bg-yellow-200',
+    },
+    cadquery: {
+      label: 'CadQuery',
+      buttonClasses: 'bg-ch-blue-700',
+      dotClasses: 'bg-blue-800',
+    },
+    jscad: {
+      label: 'JSCAD',
+      buttonClasses: 'bg-ch-purple-500',
+      dotClasses: 'bg-yellow-300',
+    },
+    INIT: {
+      label: '',
+      buttonClasses: '',
+      dotClasses: '',
+    },
+  }
+
 interface CadPackageProps {
  cadPackage: CadPackageType
  className?: string
  dotClass?: string
+  onClick?: any
 }

 const CadPackage = ({
  cadPackage,
  className = '',
  dotClass = 'w-5 h-5',
+  onClick,
 }: CadPackageProps) => {
-  const cadName = ideTypeNameMap[cadPackage] || ''
-  const isOpenScad = cadPackage === 'openscad'
-  const isCadQuery = cadPackage === 'cadquery'
-  const isJsCad = cadPackage === 'jscad'
+  const cadPackageConfig = cadPackageConfigs[cadPackage]
+
  return (
-    <div
+    <button
+      onClick={onClick}
      className={
-        `grid grid-flow-col-dense items-center gap-2 text-gray-100 ${
-          isOpenScad && 'bg-yellow-800'
-        } ${isCadQuery && 'bg-ch-blue-700'} ${
-          isJsCad && 'bg-ch-purple-500'
-        } bg-opacity-30 ` + className
+        `grid grid-flow-col-dense items-center gap-2 text-gray-100 bg-opacity-30 hover:bg-opacity-80 ${cadPackageConfig.buttonClasses} ` +
+        className
      }
    >
      <div
-        className={`${isOpenScad && 'bg-yellow-200'} ${
-          isCadQuery && 'bg-blue-800'
-        } ${isJsCad && 'bg-yellow-300'} ${dotClass} rounded-full`}
+        className={`${cadPackageConfig.dotClasses} ${dotClass} rounded-full`}
      />
-      <div>{cadName}</div>
-    </div>
+      {cadPackageConfig.label}
+    </button>
  )
 }

--- a/app/web/src/components/EditorGuide/EditorGuide.tsx
+++ b/app/web/src/components/EditorGuide/EditorGuide.tsx
@@ -0,0 +1,53 @@
+import { extractMetaData } from 'src/helpers/markdown'
+import Editor from 'rich-markdown-editor'
+import { useRef } from 'react'
+import KeyValue from 'src/components/KeyValue/KeyValue'
+
+export default function EditorGuide({ content }) {
+  const [rawMetadata, metadata] = extractMetaData(content)
+
+  const processedContent = rawMetadata
+    ? content.replace(rawMetadata[0], '')
+    : content
+  const ref = useRef(null)
+
+  return (
+    <div className="markdown-overrides py-6 px-8">
+      {metadata && (
+        <>
+          <h1 className="my-4">{metadata.title}</h1>
+          <section className="grid grid-cols-3 my-6 gap-y-4">
+            {Object.entries(metadata)
+              .filter(([key]) => key !== 'title')
+              .map(([key, value], i) => (
+                <KeyValue keyName={key.replace(/"/g, '')} key={key + '-' + i}>
+                  <LinkOrParagraph>{value}</LinkOrParagraph>
+                </KeyValue>
+              ))}
+          </section>
+        </>
+      )}
+      <Editor
+        ref={ref}
+        readOnly={true}
+        defaultValue={processedContent}
+        value={processedContent}
+        onChange={() => {}}
+      />
+    </div>
+  )
+}
+
+function LinkOrParagraph({ children }) {
+  const markdownUrlExpression =
+    /\[(.*)\]\((https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]+\.[^\s]{2,}|www\.[a-zA-Z0-9]+\.[^\s]{2,})\)/i
+  const matches = children.match(markdownUrlExpression)
+
+  return matches === null ? (
+    <p>{children}</p>
+  ) : (
+    <a href={matches[2]} rel="noopener noreferrer" target="_blank">
+      {matches[1]}
+    </a>
+  )
+}
--- a/app/web/src/components/EditorMenu/EditorMenu.tsx
+++ b/app/web/src/components/EditorMenu/EditorMenu.tsx
@@ -48,7 +48,24 @@ const EditorMenu = () => {
            <Svg name="gear" className="w-6 p-px" />
          </button>
        </div>
-        <CadPackage cadPackage={state.ideType} className="px-3" />
+        <CadPackage
+          cadPackage={state.ideType}
+          className="px-3"
+          onClick={() => {
+            thunkDispatch({
+              type: 'addEditorModel',
+              payload: {
+                type: 'guide',
+                label: 'Guide',
+                content: state.ideGuide,
+              },
+            })
+            thunkDispatch({
+              type: 'switchEditorModel',
+              payload: state.models.length,
+            })
+          }}
+        />
      </div>
      <AllShortcutsModal />
    </>
--- a/app/web/src/components/EncodedUrl/ExternalScript.tsx
+++ b/app/web/src/components/EncodedUrl/ExternalScript.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react'
 import { useIdeContext } from 'src/helpers/hooks/useIdeContext'
-import { ideTypeNameMap } from 'src/components/CadPackage/CadPackage'
+import { cadPackageConfigs } from 'src/components/CadPackage/CadPackage'
 import OutBound from 'src/components/OutBound/OutBound'
 import { prepareEncodedUrl, makeExternalUrl } from './helpers'
 import { copyTextToClipboard } from 'src/helpers/clipboard'
@@ -16,7 +16,7 @@ const ExternalScript = () => {
    'INIT' | 'SUCCESS' | 'ERROR' | 'LOADING'
  >('INIT')

-  const cadName = ideTypeNameMap[state.ideType]
+  const cadName = cadPackageConfigs[state.ideType].label

  const onPaste: React.ClipboardEventHandler<HTMLInputElement> = async ({
    clipboardData,
--- a/app/web/src/components/IdeEditor/IdeEditor.tsx
+++ b/app/web/src/components/IdeEditor/IdeEditor.tsx
@@ -1,10 +1,11 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { useIdeContext } from 'src/helpers/hooks/useIdeContext'
 import { makeCodeStoreKey, requestRender } from 'src/helpers/hooks/useIdeState'
 import Editor, { useMonaco } from '@monaco-editor/react'
 import { theme } from 'src/../config/tailwind.config'
 import { useSaveCode } from 'src/components/IdeWrapper/useSaveCode'
 import type { CadPackageType } from 'src/components/CadPackage/CadPackage'
+import EditorGuide from 'src/components/EditorGuide/EditorGuide'

 const colors = theme.extend.colors

@@ -17,6 +18,7 @@ const IdeEditor = ({ Loading }) => {
    cadquery: 'python',
    openscad: 'cpp',
    jscad: 'javascript',
+    INIT: '',
  }
  const monaco = useMonaco()
  useEffect(() => {
@@ -73,34 +75,50 @@ const IdeEditor = ({ Loading }) => {
      className="h-full"
      onKeyDown={handleSaveHotkey}
    >
-      { (state.models.length > 1) && (
-        <fieldset
-          className='bg-ch-gray-700 text-ch-gray-300 flex m-0 p-0'>
-          { state.models.map((model, i) => (
-            <label key={model.type + '-' + i}
-              className={'flex items-center gap-2 px-4 py-1 block m-0 select-none relative bg-ch-gray-600 ' + ((state.currentModel === i) && 'bg-ch-gray-800')}>
-              { model.label }
+      {state.models.length > 1 && (
+        <fieldset className="bg-ch-gray-700 text-ch-gray-300 flex m-0 p-0">
+          {state.models.map((model, i) => (
+            <label
+              key={model.type + '-' + i}
+              className={
+                'flex items-center gap-2 px-4 py-1 block m-0 select-none relative bg-ch-gray-600 ' +
+                (state.currentModel === i && 'bg-ch-gray-800')
+              }
+            >
+              {model.label}
              <input
-                type='radio'
-                name='models'
-                className='sr-only absolute inset-0'
+                type="radio"
+                name="models"
+                className="sr-only absolute inset-0"
                value={i}
                checked={state.currentModel === i}
-                onChange={() => thunkDispatch({ type: 'switchEditorModel', payload: i })} />
-            { (model.type !== 'code') && 
-              <button onClick={() => thunkDispatch({ type: 'removeEditorModel', payload: i })}
-                className='block p-1 m-.5 hover:bg-ch-gray-550' >
-                <svg viewBox='0 0 5 5' className='w-4 text-ch-gray-300'>
-                  <path stroke='currentColor' d='M 1 1 l 3 3 M 1 4 l 3 -3' strokeLinecap='round' strokeWidth='.5' />
-                </svg>
-              </button>
-            }
+                onChange={() =>
+                  thunkDispatch({ type: 'switchEditorModel', payload: i })
+                }
+              />
+              {model.type !== 'code' && (
+                <button
+                  onClick={() =>
+                    thunkDispatch({ type: 'removeEditorModel', payload: i })
+                  }
+                  className="block p-1 m-.5 hover:bg-ch-gray-550"
+                >
+                  <svg viewBox="0 0 5 5" className="w-4 text-ch-gray-300">
+                    <path
+                      stroke="currentColor"
+                      d="M 1 1 l 3 3 M 1 4 l 3 -3"
+                      strokeLinecap="round"
+                      strokeWidth=".5"
+                    />
+                  </svg>
+                </button>
+              )}
            </label>
-          )) }
+          ))}
        </fieldset>
      )}
-      { (state.models[state.currentModel].type === 'code') 
-        ? <Editor
+      {state.models[state.currentModel].type === 'code' ? (
+        <Editor
          defaultValue={state.code}
          value={state.code}
          theme={theme}
@@ -110,8 +128,11 @@ const IdeEditor = ({ Loading }) => {
          language={ideTypeToLanguageMap[state.ideType] || 'cpp'}
          onChange={handleCodeChange}
        />
-        : <pre className="bg-ch-gray-800 text-ch-gray-300 p-6 h-full">{ state.models[state.currentModel].content }</pre>
-      }
+      ) : (
+        <div className="bg-ch-gray-800 h-full">
+          <EditorGuide content={state.models[state.currentModel].content} />
+        </div>
+      )}
    </div>
  )
 }