feat(core): Added new debug event type and debug system

packages/components/package.json

@@ -44,6 +44,7 @@
     "@material-ui/icons": "^4.0.1",
     "@material-ui/lab": "^v4.0.0-alpha.14",
     "prismjs": "1.16.0",
+    "react-markdown": "4.3.1",
     "file-saver": "^2.0.2"
   },
   "dependencies": {},

packages/components/rollup.config.js

@@ -33,7 +33,7 @@ const createConfig = (component, module) => {
 
 const config = []
 // When developing, you can use this to only rebuild the components you're working on
-let dev = false
+let dev = true
 let only = ['Workbench']
 for (let component of components) {
   if (!dev || only.indexOf(component) !== -1) config.push(createConfig(component, false))

packages/components/src/Draft/Text/index.js

@@ -18,7 +18,6 @@ const Text = (props) => {
     text.push(<tspan key={'tspan-' + key}>{lines.shift()}</tspan>)
     for (let line of lines) {
       key++
-      console.log('multi', line, typeof line)
       text.push(
         <tspan
           key={'tspan-' + key}

packages/components/src/Workbench/DraftPattern/Events/event.js

@@ -0,0 +1,20 @@
+import React from 'react'
+import DebugIcon from '@material-ui/icons/PlayCircleOutline'
+import InfoIcon from '@material-ui/icons/Info'
+import WarningIcon from '@material-ui/icons/ErrorOutline'
+import ErrorIcon from '@material-ui/icons/HighlightOff'
+import Markdown from 'react-markdown'
+
+const Event = ({ type, event }) => (
+  <div className={`draft-event ${type}`}>
+    <div className={`icon ${type}`}>
+      {type === 'debug' && <DebugIcon fontSize="small" />}
+      {type === 'info' && <InfoIcon fontSize="small" />}
+      {type === 'warning' && <WarningIcon fontSize="small" />}
+      {type === 'error' && <ErrorIcon fontSize="small" />}
+    </div>
+    <Markdown source={event} />
+  </div>
+)
+
+export default Event

packages/components/src/Workbench/DraftPattern/Events/index.js

@@ -0,0 +1,16 @@
+import React from 'react'
+import Event from './event'
+
+const DraftEvents = ({ events, app }) => (
+  <div className="draft-events">
+    {['error', 'warning', 'info', 'debug'].map((type) => (
+      <div className={`events-${type}`}>
+        {events[type].map((event, index) => (
+          <Event event={event} app={app} type={type} key={index} />
+        ))}
+      </div>
+    ))}
+  </div>
+)
+
+export default DraftEvents

packages/components/src/Workbench/DraftPattern/index.js

@@ -16,6 +16,7 @@ import PaperlessIcon from '@material-ui/icons/Nature'
 import CompleteIcon from '@material-ui/icons/Style'
 import UnhideIcon from '@material-ui/icons/ChevronLeft'
 import HideIcon from '@material-ui/icons/ChevronRight'
+import Events from './Events'
 
 const DraftPattern = (props) => {
   const [design, setDesign] = useState(true)
@@ -123,6 +124,7 @@ const DraftPattern = (props) => {
           viewBox={viewBox}
           className="freesewing draft shadow"
         />
+        <Events events={patternProps.events} />
         {hideAside && (
           <div style={styles.unhide}>
             <IconButton

packages/components/src/Workbench/index.js

@@ -36,6 +36,9 @@ const Workbench = ({
   const [measurements, setMeasurements] = useState(null)
   const [svgExport, setSvgExport] = useState(false)
 
+  // Enable debug in Workbench
+  defaultGist.settings.debug = true
+
   useEffect(() => {
     let m = getMeasurements()
     setMeasurements(m)
@@ -220,7 +223,11 @@ const Workbench = ({
 
   return (
     <MuiThemeProvider theme={createMuiTheme(themes[theme])}>
-      <div className={theme === 'light' ? 'theme-wrapper light' : 'theme-wrapper dark'}>
+      <div
+        className={
+          theme === 'light' ? 'workbench theme-wrapper light' : 'workbench theme-wrapper dark'
+        }
+      >
         {display !== 'welcome' ? <Navbar navs={navs} home={() => saveDisplay('welcome')} /> : null}
         {main}
         {display !== 'welcome' ? <Footer language={language} /> : null}