wip: Added docs view

packages/react/components/Editor/components/views/DocsView.mjs

@@ -0,0 +1,53 @@
+// Dependencies
+import { linkClasses, horFlexClasses, patternUrlFromState } from '@freesewing/utils'
+import { exportTypes, handleExport } from '../../lib/export/index.mjs'
+// Hooks
+import React, { useState } from 'react'
+// Components
+import { H1, H2, H3, H5 } from '@freesewing/react/components/Heading'
+import { Popout } from '@freesewing/react/components/Popout'
+import { HeaderMenu } from '../HeaderMenu.mjs'
+import { EditIcon, CodeIcon, TipIcon, PrintIcon } from '@freesewing/react/components/Icon'
+
+/**
+ * This is the docs view, it just shows content
+ *
+ * @param {Object} props - All the props
+ * @param {Function} props.config - The editor configuration
+ * @param {Object} props.state - The editor state object
+ * @param {Object} props.update - Helper object for updating the editor state
+ */
+export const DocsView = ({ state, config, update }) => {
+  return (
+    <>
+      <HeaderMenu state={state} {...{ config, update }} />
+      <div className="tw-m-auto tw-mt-8 tw-max-w-2xl tw-px-4 tw-mb-8">
+        <H1>Documenation</H1>
+        <Popout link>
+          <H5>Understanding the FreeSewing Pattern Editor</H5>
+          <p className="tw-text-lg">
+            Please refer to the pattern editor documentation at:
+            <br />
+            <b>
+              <a
+                className={linkClasses}
+                href="https://freesewing.org/docs/about/site/editor"
+              >{`FreeSewing.org/docs/about/editor`}</a>
+            </b>
+          </p>
+        </Popout>
+        <Popout tip>
+          <H5>
+            Looking for info on how it <em>really</em> works?
+          </H5>
+          <p>
+            Documentation for developers and contributors is available at{' '}
+            <b>
+              <a className={linkClasses} href="https://freesewing.dev/">{`FreeSewing.dev`}</a>
+            </b>
+          </p>
+        </Popout>
+      </div>
+    </>
+  )
+}

packages/react/components/Editor/components/views/index.mjs

@@ -7,6 +7,7 @@ import { SaveView } from './SaveView.mjs'
 import { ExportView } from './ExportView.mjs'
 import { UndosView } from './UndosView.mjs'
 import { LayoutView } from './LayoutView.mjs'
+import { DocsView } from './DocsView.mjs'
 import { ErrorIcon } from '@freesewing/react/components/Icon'
 import {
   OptionsIcon,
@@ -59,6 +60,7 @@ export const View = (props) => {
   if (view === 'export') return <ExportView {...props} />
   if (view === 'undos') return <UndosView {...props} />
   if (view === 'layout') return <LayoutView {...props} />
+  if (view === 'docs') return <DocsView {...props} />
 
   return <h1 className="tw-ext-center tw-my-12">No view component for view {props.view}</h1>
 }