feat: added log view to editor

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

@@ -0,0 +1,66 @@
+// Dependencies
+import { linkClasses, horFlexClasses, patternUrlFromState } from '@freesewing/utils'
+import { exportTypes, handleExport } from '../../lib/export/index.mjs'
+import { draft } from '../../lib/index.mjs'
+// Hooks
+import React, { useState } from 'react'
+// Components
+import Markdown from 'react-markdown'
+import { H1, H3 } from '@freesewing/react/components/Heading'
+import { HeaderMenu } from '../HeaderMenu.mjs'
+import { Tabs, Tab } from '@freesewing/react/components/Tab'
+
+// The log levels
+const levels = ['error', 'warn', 'info', 'debug']
+
+/**
+ * This is the log view, it shows the pattern logs
+ *
+ * @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 LogView = (props) => {
+  const { state, config, update } = props
+  const { pattern } = draft(props.Design, state.settings)
+
+  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>Pattern Logs</H1>
+        <Tabs tabs="Set 0 Logs, Pattern Logs">
+          <Tab tabId="Set 0 Logs">
+            {levels.map((level) => (
+              <div key={level}>
+                {pattern.setStores[0].logs[level].length > 0 ? (
+                  <>
+                    <H3>{level}</H3>
+                    {pattern.setStores[0].logs[level].map((line, i) => (
+                      <Markdown key={i}>{line}</Markdown>
+                    ))}
+                  </>
+                ) : null}
+              </div>
+            ))}
+          </Tab>
+          <Tab tabId="Pattern Logs">
+            {levels.map((level) => (
+              <div key={level}>
+                {pattern.store.logs[level].length > 0 ? (
+                  <>
+                    <H3>{level}</H3>
+                    {pattern.store.logs[level].map((line, i) => (
+                      <Markdown key={i}>{line}</Markdown>
+                    ))}
+                  </>
+                ) : null}
+              </div>
+            ))}
+          </Tab>
+        </Tabs>
+      </div>
+    </>
+  )
+}

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

@@ -9,6 +9,7 @@ import { ExportView } from './ExportView.mjs'
 import { UndosView } from './UndosView.mjs'
 import { LayoutView } from './LayoutView.mjs'
 import { DocsView } from './DocsView.mjs'
+import { LogView } from './LogView.mjs'
 import { EditSettingsView } from './EditSettingsView.mjs'
 import { ErrorIcon } from '@freesewing/react/components/Icon'
 import {
@@ -65,6 +66,7 @@ export const View = (props) => {
   if (view === 'docs') return <DocsView {...props} />
   if (view === 'editSettings') return <EditSettingsView {...props} />
   if (view === 'inspect') return <InspectView {...props} />
+  if (view === 'logs') return <LogView {...props} />
 
   return <h1 className="tw-ext-center tw-my-12">No view component for view {props.view}</h1>
 }