wip(lab): Work on workbench

- Moved the various tabs on the draft view to their own views.
- Renames modes to views
- Started to group various aspects of the workbench state under
  `_state` in the gist to prevent it from getting all mixed up
  with the core settings.
- Updated events title to make it more clear not all events might
  be present
- Removed valid state in measurements input since it was only
  getting updated on keyboard input but now when preloading
  measurements (which it does now)

packages/freesewing.shared/components/workbench/draft/index.js

@@ -1,25 +1,12 @@
-import React, { useState } from 'react'
 import SvgWrapper from './svg-wrapper'
 import Error from './error.js'
-import Events from './events.js'
-import Json from 'shared/components/json.js'
-import Yaml from 'shared/components/yaml.js'
 import { capitalize } from 'shared/utils.js'
 import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch"
 
-const tabClasses = active => `
-  tab tab-bordered font-bold text-4xl pb-12 capitalize
-  ${active && 'text-base-content tab-active'}
-`
-
-const Wrap = props => <div className="max-w-screen-xl m-auto">{props.children}</div>
-
 const LabDraft = props => {
   const { app, draft, pattern, gist, updateGist, unsetGist } = props
   if (!draft) return null
 
-  const [tab, setTab] = useState(props.pattern.config.name)
-
   if (gist?.renderer === 'svg') {
     // Render as SVG
     let svg
@@ -41,24 +28,14 @@ const LabDraft = props => {
 
   return (
     <div>
-      <div className="tabs my-8 mx-auto justify-center">
-        {[props.pattern.config.name, 'events', 'yaml', 'json'].map(name => <button
-          key={name}
-          onClick={() => setTab(name)}
-          className={tabClasses(tab === name)}
-        >{name}</button>)}
-      </div>
-      {tab === 'events' && <Wrap><Events events={draft.events} /></Wrap>}
-      {tab === 'json' && <Wrap><Json>{JSON.stringify(props.gist, null, 2)}</Json></Wrap>}
-      {tab === 'yaml' && <Wrap><Yaml json={JSON.stringify(props.gist, null, 2)} /></Wrap>}
-      {tab === props.pattern.config.name && <SvgWrapper
+      <SvgWrapper
         draft={draft}
         patternProps={patternProps}
         gist={gist}
         updateGist={updateGist}
         unsetGist={unsetGist}
         app={app}
-      />}
+      />
     </div>
   )
 }