feat(org): Ported components to mjs and named exports

sites/shared/components/error/error-boundary.mjs

@@ -0,0 +1,67 @@
+import React from 'react'
+import { ResetButtons } from './reset-buttons'
+import { LogGroup } from 'shared/components/workbench/logs'
+import { ErrorView as DefaultErrorView } from './view'
+
+const ErrorView = (props) => {
+  if (props.children) return props.children
+
+  const inspectChildrenProps = {
+    type: 'error',
+    logs: [props.error],
+    units: props.gist?.units,
+  }
+  const inspectChildren = <LogGroup {...inspectChildrenProps}></LogGroup>
+  return (
+    props.children || (
+      <DefaultErrorView inspectChildren={inspectChildren}>
+        <h4>If you think your last action caused this error, you can: </h4>
+        <ResetButtons undoGist={props.undoGist} resetGist={props.resetGist} />
+      </DefaultErrorView>
+    )
+  )
+}
+
+export class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = { hasError: false }
+  }
+
+  static getDerivedStateFromError(error) {
+    // Update state so the next render will show the fallback UI.
+    return { hasError: true, error }
+  }
+
+  componentDidCatch(error, errorInfo) {
+    // You can also log the error to an error reporting service
+    console.log(error, errorInfo)
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.props.gist !== prevProps.gist) {
+      this.setState({ hasError: false })
+    }
+  }
+
+  render() {
+    if (this.state.hasError) {
+      // You can render any custom fallback UI
+      return (
+        <ErrorView {...this.props} error={this.state.error}>
+          {this.errorView}
+        </ErrorView>
+      )
+    }
+
+    try {
+      return this.props.children
+    } catch (e) {
+      return (
+        <ErrorView {...this.props} error={e}>
+          {this.errorView}
+        </ErrorView>
+      )
+    }
+  }
+}