Adds usePluginStyle hook and PluginStyle type (#29)

Author: alisonjlai

src/client/initialize.ts

@@ -3,6 +3,7 @@ import {
   PluginConfig,
   PluginInstance,
   PluginMessageResponse,
+  PluginStyle,
   WorkbookSelection,
   WorkbookVariable,
 } from '../types';
@@ -223,6 +224,18 @@ export function initialize<T = {}>(): PluginInstance<T> {
         void execPromise('wb:plugin:element:fetch-more', configId);
       },
     },
+
+    style: {
+      subscribe(callback: (style: PluginStyle) => void) {
+        on('wb:plugin:style:update', callback);
+        return () => off('wb:plugin:style:update', callback);
+      },
+
+      get() {
+        return execPromise('wb:plugin:style:get');
+      },
+    },
+
     destroy() {
       Object.keys(listeners).forEach(event => delete listeners[event]);
       window.removeEventListener('message', listener, false);

src/react/hooks.ts

@@ -8,6 +8,7 @@ import {
   WorkbookElementData,
   WorkbookSelection,
   WorkbookVariable,
+  PluginStyle,
 } from '../types';
 import { deepEqual } from '../utils/deepEqual';
 
@@ -246,3 +247,20 @@ export function useActionEffect(configId: string, effect: () => void) {
     return client.config.registerEffect(configId, effectRef.current);
   }, [client, configId, effect]);
 }
+
+/**
+ * React hook for accessing plugin style with live updates
+ * @returns {PluginStyle | undefined} Style properties from the workbook if available
+ */
+export function usePluginStyle(): PluginStyle | undefined {
+  const client = usePlugin();
+  const [style, setStyle] = useState<PluginStyle | undefined>();
+
+  useEffect(() => {
+    // Request initial style data on mount and subscribe to updates
+    void client.style.get().then(response => setStyle(response));
+    return client.style.subscribe(setStyle);
+  }, [client]);
+
+  return style;
+}

src/types.ts

@@ -23,6 +23,15 @@ export interface PluginConfig<T> {
   [key: string]: any;
 }
 
+/**
+ * Style colors available to plugins
+ * @typedef {object} PluginStyle
+ * @property {string} backgroundColor Background color set from workbook if any
+ */
+export interface PluginStyle {
+  backgroundColor: string;
+}
+
 /**
  * @typedef {object} WorkbookVariable
  * @property {string} name Name of control variable within workbook
@@ -348,6 +357,21 @@ export interface PluginInstance<T = any> {
     fetchMoreElementData(configId: string): void;
   };
 
+  style: {
+    /**
+     * Subscribe to style updates
+     * @param callback Function to call when style updates
+     * @returns Unsubscriber function
+     */
+    subscribe(callback: (style: PluginStyle) => void): () => void;
+
+    /**
+     * Request current style from workbook
+     * @returns Promise with current style
+     */
+    get(): Promise<PluginStyle>;
+  };
+
   /**
    * Destroys plugin instance and removes all subscribers
    */