feat(shared): Implement docs view in workbench. See #5060

sites/shared/components/designs/info.mjs

@@ -73,7 +73,7 @@ const SimpleOptionsList = ({ options, t, design }) => {
   return <ul className="list list-inside pl-2 list-disc">{output}</ul>
 }
 
-export const DesignInfo = ({ design, docs = false }) => {
+export const DesignInfo = ({ design, docs = false, workbench = false }) => {
   const { setModal } = useContext(ModalContext)
   const { t, i18n } = useTranslation([...ns, design])
   const { language } = i18n
@@ -125,11 +125,13 @@ export const DesignInfo = ({ design, docs = false }) => {
     <>
       <h5 className="-mt-6 text-accent font-medium">#FreeSewing{capitalize(design)}</h5>
       <p className="text-xl">{t(`designs:${design}.d`)}</p>
-      <Link className="btn btn-primary btn items-center gap-8" href={`/new/${design}`}>
-        <NewPatternIcon />
-        {t('tags:newThingPattern', { thing: capitalize(design) })}
-      </Link>
-      {docs ? null : (
+      {workbench ? null : (
+        <Link className="btn btn-primary btn items-center gap-8" href={`/new/${design}`}>
+          <NewPatternIcon />
+          {t('tags:newThingPattern', { thing: capitalize(design) })}
+        </Link>
+      )}
+      {docs || workbench ? null : (
         <div className="flex flex-row flex-wrap gap-2 md:gap-4 items-center p-4 border rounded-lg bg-secondary bg-opacity-5 max-w-4xl">
           <b>Jump to:</b>
           <AnchorLink id="notes">

sites/shared/components/workbench/en.yaml

@@ -59,6 +59,7 @@ help: Help
 layoutSettings.d: Additional options to further optimize the printing layout of your pattern.
 layoutSettings.t: Layout settings
 length: Length
+learnHowToUseEditor: Learn how to use FreeSewing's online pattern editor
 measies: Pattern Measurements
 measiesOk: We have all required measurements to create this pattern.
 measurements.d: Test the effect of a measurement on the way this pattern looks

sites/shared/components/workbench/header.mjs

@@ -156,7 +156,11 @@ const NavIcons = ({ setView, setDense, dense, view, saveAs = false }) => {
       >
         <XrayIcon className={iconSize} />
       </NavButton>
-      <NavButton label={t('workbench:docs')} href="/docs/site/draft">
+      <NavButton
+        onClick={() => setView('docs')}
+        label={t('workbench:docs')}
+        active={view === 'docs'}
+      >
         <DocsIcon className={iconSize} />
       </NavButton>
     </>

sites/shared/components/workbench/new.mjs

@@ -26,6 +26,7 @@ import { ExportView, ns as exportNs } from 'shared/components/workbench/views/ex
 import { LogView, ns as logNs } from 'shared/components/workbench/views/logs/index.mjs'
 import { InspectView, ns as inspectNs } from 'shared/components/workbench/views/inspect/index.mjs'
 import { MeasiesView, ns as measiesNs } from 'shared/components/workbench/views/measies/index.mjs'
+import { DocsView, ns as docsNs } from 'shared/components/workbench/views/docs/index.mjs'
 
 export const ns = nsMerge(
   'account',
@@ -60,6 +61,7 @@ const views = {
   logs: LogView,
   inspect: InspectView,
   measies: MeasiesView,
+  docs: DocsView,
 }
 
 const draftViews = ['draft', 'inspect']

sites/shared/components/workbench/views/docs/index.mjs

@@ -0,0 +1,24 @@
+//  __SDEFILE__ - This file is a dependency for the stand-alone environment
+// Hooks
+import { useTranslation } from 'next-i18next'
+// Components
+import { DesignInfo } from 'shared/components/designs/info.mjs'
+import { Popout } from 'shared/components/popout/index.mjs'
+import { PageLink } from 'shared/components/link.mjs'
+
+export const ns = ['workbench', 'designs']
+
+export const DocsView = ({ design, setView }) => {
+  // Hooks
+  const { t } = useTranslation(ns)
+
+  return (
+    <div className="m-auto mt-8 max-w-7xl px-4 mb-8">
+      <Popout tip compact>
+        <PageLink txt={t('workbench:learnHowToUseEditor')} href="/docs/site/draft" />
+      </Popout>
+      <h2>{t(`designs:${design}.t`)}</h2>
+      <DesignInfo design={design} workbench />
+    </div>
+  )
+}