@arcanewizards/timecode-toolbox 0.0.3

package/src/components/frontend/index.tsx

@@ -0,0 +1,46 @@
+import { FrontendComponentRenderer } from '@arcanejs/toolkit-frontend/types';
+import {
+  BaseBrowserContext,
+  startSigilFrontend,
+} from '@arcanewizards/sigil/frontend';
+import { isTimecodeToolboxComponent, NAMESPACE } from '../proto';
+import { ToolboxRoot } from './toolbox/root';
+
+export type TimecodeToolboxBrowserContext = BaseBrowserContext;
+
+export const timecodeToolboxFrontendComponents =
+  (): FrontendComponentRenderer => ({
+    namespace: NAMESPACE,
+    render: (info) => {
+      if (!isTimecodeToolboxComponent(info)) {
+        throw new Error(`Cannot render component ${info.namespace}`);
+      }
+
+      switch (info.component) {
+        case 'toolbox-root':
+          return <ToolboxRoot info={info} />;
+      }
+    },
+  });
+
+export const startTimecodeToolboxServerFrontend = (
+  browser?: TimecodeToolboxBrowserContext | null,
+) => {
+  startSigilFrontend<TimecodeToolboxBrowserContext>({
+    browser,
+    appRenderers: [timecodeToolboxFrontendComponents()],
+    loadingState: () => (
+      <div style={{ width: '100%', textAlign: 'center', padding: '2rem' }}>
+        Loading Toolbox...
+      </div>
+    ),
+  });
+};
+
+declare global {
+  interface Window {
+    startTimecodeToolboxServerFrontend?: typeof startTimecodeToolboxServerFrontend;
+  }
+}
+
+window.startTimecodeToolboxServerFrontend = startTimecodeToolboxServerFrontend;

package/src/components/frontend/toolbox/content.tsx

@@ -0,0 +1,45 @@
+import { useBrowserContext } from '@arcanewizards/sigil/frontend';
+import { FC } from 'react';
+import { SizeAwareDiv } from './core/size-aware-div';
+import { Icon } from '@arcanejs/toolkit-frontend/components/core';
+
+export const ExternalLink = ({
+  href,
+  children,
+}: {
+  href: string;
+  children: React.ReactNode;
+}) => {
+  const { openExternalLink } = useBrowserContext();
+  return (
+    <a
+      href={href}
+      target="_blank"
+      rel="noopener noreferrer"
+      onClick={(e) => {
+        e.preventDefault();
+        openExternalLink(href);
+      }}
+      className="
+        text-sigil-usage-hint-foreground no-underline
+        hover:underline
+      "
+    >
+      {children}
+    </a>
+  );
+};
+
+export const NoToolboxChildren: FC<{ text: string }> = ({ text }) => {
+  return (
+    <SizeAwareDiv
+      className="
+        flex grow flex-col items-center justify-center gap-1 bg-sigil-bg-light
+        p-1 text-sigil-foreground-muted
+      "
+    >
+      <Icon icon="handyman" className="text-block-icon" />
+      <div className="text-center">{text}</div>
+    </SizeAwareDiv>
+  );
+};

package/src/components/frontend/toolbox/context.tsx

@@ -0,0 +1,63 @@
+import { createContext, useContext } from 'react';
+import {
+  ApplicationState,
+  AvailableHandlers,
+  ToolboxConfig,
+  ToolboxRootCallHandler,
+  ToolboxRootGetNetworkInterfacesReturn,
+} from '../../proto';
+import { Tree } from '../../../tree';
+
+export type ConfigContextData = {
+  config: ToolboxConfig;
+  updateConfig: (change: (current: ToolboxConfig) => ToolboxConfig) => void;
+};
+
+export const ConfigContext = createContext<ConfigContextData>(
+  new Proxy({} as ConfigContextData, {
+    get() {
+      throw new Error('ConfigContext not initialized');
+    },
+  }),
+);
+
+export const ApplicationStateContext = createContext<ApplicationState>(
+  new Proxy({} as ApplicationState, {
+    get() {
+      throw new Error('ApplicationStateContext not initialized');
+    },
+  }),
+);
+
+export const useApplicationState = () => useContext(ApplicationStateContext);
+
+export type ApplicationHandlersContextData = {
+  handlers: Tree<AvailableHandlers>;
+  callHandler<H extends keyof AvailableHandlers>(
+    args: Pick<ToolboxRootCallHandler<H>, 'path' | 'handler' | 'args'>,
+  ): Promise<void>;
+};
+
+export const ApplicationHandlersContext =
+  createContext<ApplicationHandlersContextData>(
+    new Proxy({} as ApplicationHandlersContextData, {
+      get() {
+        throw new Error('ApplicationHandlersContext not initialized');
+      },
+    }),
+  );
+
+export const useApplicationHandlers = () =>
+  useContext(ApplicationHandlersContext);
+
+type NetworkContextData = {
+  getNetworkInterfaces: () => Promise<ToolboxRootGetNetworkInterfacesReturn>;
+};
+
+export const NetworkContext = createContext<NetworkContextData>(
+  new Proxy({} as NetworkContextData, {
+    get() {
+      throw new Error('NetworkContext not initialized');
+    },
+  }),
+);

package/src/components/frontend/toolbox/core/size-aware-div.tsx

@@ -0,0 +1,51 @@
+import { cssVariables } from '@arcanewizards/sigil/frontend/styling';
+import React, { useEffect, useState } from 'react';
+
+type SizeAwareDivProps = React.HTMLAttributes<HTMLDivElement>;
+
+/**
+ * A div component that sets CSS variables of it's current size,
+ * allowing children to use those variables to adapt to the size of the div.
+ * The variables set are --size-aware-div-width and --size-aware-div-height.
+ */
+export const SizeAwareDiv: React.FC<SizeAwareDivProps> = ({
+  children,
+  style,
+  ...rest
+}) => {
+  const [div, setDiv] = useState<HTMLDivElement | null>(null);
+  const [rect, setRect] = useState<DOMRectReadOnly | null>(null);
+
+  useEffect(() => {
+    // Detect changes in div size
+    if (!div) {
+      return;
+    }
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        setRect(entry.contentRect);
+      }
+    });
+    resizeObserver.observe(div);
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [div]);
+
+  return (
+    <div
+      ref={setDiv}
+      {...rest}
+      style={{
+        ...style,
+        ...(rect &&
+          cssVariables({
+            '--size-aware-div-width': rect.width + 'px',
+            '--size-aware-div-height': rect.height + 'px',
+          })),
+      }}
+    >
+      {children}
+    </div>
+  );
+};