@arbor-education/design-system.components 0.0.4 → 0.0.5

package/src/utils/Constants.ts

@@ -0,0 +1,5 @@
+export const SLIDEOVER = {
+  ADD_SLIDEOVER: 'ds-add-slideover',
+  REMOVE_SLIDEOVER: 'ds-remove-slideover',
+  REMOVE_ALL_SLIDEOVERS: 'ds-remove-all-slideover',
+};

package/src/utils/PopupParentContext.ts

@@ -0,0 +1,6 @@
+import { createContext, type RefObject } from 'react';
+import { getDefaultPopupParent } from './getDefaultPopupParent';
+
+export const PopupParentContext = createContext<RefObject<HTMLElement | null>>({
+  current: getDefaultPopupParent(),
+});

package/src/utils/PubSub.test.ts

@@ -0,0 +1,303 @@
+import { expect, test, describe, vi, beforeEach } from 'vitest';
+import PubSub from './PubSub';
+
+describe('PubSub Service', () => {
+  beforeEach(() => {
+    // Clear all subscriptions before each test
+    // @ts-expect-error - Accessing private property for testing
+    PubSub.events = {};
+  });
+
+  describe('subscribe', () => {
+    test('subscribes a function to an event', () => {
+      const mockFn = vi.fn();
+      const subscriptionId = PubSub.subscribe('test-event', mockFn);
+
+      expect(subscriptionId).toBeDefined();
+      expect(typeof subscriptionId).toBe('string');
+    });
+
+    test('returns a unique subscription ID for each subscription', () => {
+      const mockFn1 = vi.fn();
+      const mockFn2 = vi.fn();
+
+      const id1 = PubSub.subscribe('test-event', mockFn1);
+      const id2 = PubSub.subscribe('test-event', mockFn2);
+
+      expect(id1).not.toBe(id2);
+    });
+
+    test('allows multiple subscriptions to the same event', () => {
+      const mockFn1 = vi.fn();
+      const mockFn2 = vi.fn();
+
+      PubSub.subscribe('test-event', mockFn1);
+      PubSub.subscribe('test-event', mockFn2);
+
+      PubSub.publish('test-event', 'test data');
+
+      expect(mockFn1).toHaveBeenCalledTimes(1);
+      expect(mockFn2).toHaveBeenCalledTimes(1);
+    });
+
+    test('allows subscriptions to different events', () => {
+      const mockFn1 = vi.fn();
+      const mockFn2 = vi.fn();
+
+      PubSub.subscribe('event-1', mockFn1);
+      PubSub.subscribe('event-2', mockFn2);
+
+      PubSub.publish('event-1', 'data-1');
+
+      expect(mockFn1).toHaveBeenCalledWith('data-1');
+      expect(mockFn2).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('unsubscribe', () => {
+    test('removes a subscription by ID', () => {
+      const mockFn = vi.fn();
+      const subscriptionId = PubSub.subscribe('test-event', mockFn);
+
+      PubSub.unsubscribe('test-event', subscriptionId);
+      PubSub.publish('test-event', 'test data');
+
+      expect(mockFn).not.toHaveBeenCalled();
+    });
+
+    test('only removes the specific subscription', () => {
+      const mockFn1 = vi.fn();
+      const mockFn2 = vi.fn();
+
+      const id1 = PubSub.subscribe('test-event', mockFn1);
+      PubSub.subscribe('test-event', mockFn2);
+
+      PubSub.unsubscribe('test-event', id1);
+      PubSub.publish('test-event', 'test data');
+
+      expect(mockFn1).not.toHaveBeenCalled();
+      expect(mockFn2).toHaveBeenCalledWith('test data');
+    });
+
+    test('does not throw error when unsubscribing non-existent event', () => {
+      expect(() => {
+        PubSub.unsubscribe('non-existent-event', 'fake-id');
+      }).not.toThrow();
+    });
+
+    test('does not throw error when unsubscribing non-existent subscription ID', () => {
+      const mockFn = vi.fn();
+      PubSub.subscribe('test-event', mockFn);
+
+      expect(() => {
+        PubSub.unsubscribe('test-event', 'non-existent-id');
+      }).not.toThrow();
+    });
+  });
+
+  describe('publish', () => {
+    test('calls subscribed function when event is published', () => {
+      const mockFn = vi.fn();
+      PubSub.subscribe('test-event', mockFn);
+
+      PubSub.publish('test-event');
+
+      expect(mockFn).toHaveBeenCalledTimes(1);
+    });
+
+    test('passes data to subscribed function', () => {
+      const mockFn = vi.fn();
+      const testData = { message: 'Hello World' };
+
+      PubSub.subscribe('test-event', mockFn);
+      PubSub.publish('test-event', testData);
+
+      expect(mockFn).toHaveBeenCalledWith(testData);
+    });
+
+    test('handles undefined data parameter', () => {
+      const mockFn = vi.fn();
+      PubSub.subscribe('test-event', mockFn);
+
+      PubSub.publish('test-event');
+
+      expect(mockFn).toHaveBeenCalledWith(undefined);
+    });
+
+    test('calls all subscribed functions for an event', () => {
+      const mockFn1 = vi.fn();
+      const mockFn2 = vi.fn();
+      const mockFn3 = vi.fn();
+
+      PubSub.subscribe('test-event', mockFn1);
+      PubSub.subscribe('test-event', mockFn2);
+      PubSub.subscribe('test-event', mockFn3);
+
+      PubSub.publish('test-event', 'shared data');
+
+      expect(mockFn1).toHaveBeenCalledWith('shared data');
+      expect(mockFn2).toHaveBeenCalledWith('shared data');
+      expect(mockFn3).toHaveBeenCalledWith('shared data');
+    });
+
+    test('does not throw error when publishing to non-existent event', () => {
+      expect(() => {
+        PubSub.publish('non-existent-event', 'some data');
+      }).not.toThrow();
+    });
+
+    test('handles various data types', () => {
+      const mockFn = vi.fn();
+      PubSub.subscribe('test-event', mockFn);
+
+      // String
+      PubSub.publish('test-event', 'string data');
+      expect(mockFn).toHaveBeenCalledWith('string data');
+
+      // Number
+      PubSub.publish('test-event', 42);
+      expect(mockFn).toHaveBeenCalledWith(42);
+
+      // Object
+      const obj = { key: 'value' };
+      PubSub.publish('test-event', obj);
+      expect(mockFn).toHaveBeenCalledWith(obj);
+
+      // Array
+      const arr = [1, 2, 3];
+      PubSub.publish('test-event', arr);
+      expect(mockFn).toHaveBeenCalledWith(arr);
+
+      // Boolean
+      PubSub.publish('test-event', true);
+      expect(mockFn).toHaveBeenCalledWith(true);
+
+      expect(mockFn).toHaveBeenCalledTimes(5);
+    });
+  });
+
+  describe('integration scenarios', () => {
+    test('subscribe, publish, and unsubscribe workflow', () => {
+      const mockFn = vi.fn();
+      const subscriptionId = PubSub.subscribe('workflow-event', mockFn);
+
+      // First publish should trigger the function
+      PubSub.publish('workflow-event', 'first');
+      expect(mockFn).toHaveBeenCalledTimes(1);
+      expect(mockFn).toHaveBeenCalledWith('first');
+
+      // Second publish should also trigger
+      PubSub.publish('workflow-event', 'second');
+      expect(mockFn).toHaveBeenCalledTimes(2);
+      expect(mockFn).toHaveBeenCalledWith('second');
+
+      // Unsubscribe
+      PubSub.unsubscribe('workflow-event', subscriptionId);
+
+      // Third publish should not trigger
+      PubSub.publish('workflow-event', 'third');
+      expect(mockFn).toHaveBeenCalledTimes(2);
+    });
+
+    test('multiple events with multiple subscribers', () => {
+      const event1Handler1 = vi.fn();
+      const event1Handler2 = vi.fn();
+      const event2Handler1 = vi.fn();
+
+      PubSub.subscribe('event-1', event1Handler1);
+      PubSub.subscribe('event-1', event1Handler2);
+      PubSub.subscribe('event-2', event2Handler1);
+
+      PubSub.publish('event-1', 'data-1');
+      PubSub.publish('event-2', 'data-2');
+
+      expect(event1Handler1).toHaveBeenCalledWith('data-1');
+      expect(event1Handler2).toHaveBeenCalledWith('data-1');
+      expect(event2Handler1).toHaveBeenCalledWith('data-2');
+
+      expect(event1Handler1).toHaveBeenCalledTimes(1);
+      expect(event1Handler2).toHaveBeenCalledTimes(1);
+      expect(event2Handler1).toHaveBeenCalledTimes(1);
+    });
+
+    test('handler can modify external state', () => {
+      let externalState = 0;
+
+      const incrementHandler = (amount: unknown) => {
+        externalState += amount as number;
+      };
+
+      PubSub.subscribe('increment', incrementHandler);
+
+      PubSub.publish('increment', 5);
+      expect(externalState).toBe(5);
+
+      PubSub.publish('increment', 3);
+      expect(externalState).toBe(8);
+    });
+
+    test('subscription within a handler does not affect current publish', () => {
+      const handler1 = vi.fn(() => {
+        // Subscribe a new handler during the first handler execution
+        PubSub.subscribe('test-event', handler2);
+      });
+      const handler2 = vi.fn();
+
+      PubSub.subscribe('test-event', handler1);
+      PubSub.publish('test-event', 'first');
+
+      // handler1 should be called, handler2 should not (wasn't subscribed yet when publish started)
+      expect(handler1).toHaveBeenCalledTimes(1);
+      expect(handler2).not.toHaveBeenCalled();
+
+      // On second publish, both should be called
+      PubSub.publish('test-event', 'second');
+      expect(handler1).toHaveBeenCalledTimes(2);
+      expect(handler2).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('edge cases', () => {
+    test('handles empty event name string', () => {
+      const mockFn = vi.fn();
+      const subscriptionId = PubSub.subscribe('', mockFn);
+
+      PubSub.publish('', 'data');
+      expect(mockFn).toHaveBeenCalledWith('data');
+
+      PubSub.unsubscribe('', subscriptionId);
+      PubSub.publish('', 'data');
+      expect(mockFn).toHaveBeenCalledTimes(1);
+    });
+
+    test('handles function that throws error', () => {
+      const errorHandler = vi.fn(() => {
+        throw new Error('Handler error');
+      });
+      const normalHandler = vi.fn();
+
+      PubSub.subscribe('test-event', errorHandler);
+      PubSub.subscribe('test-event', normalHandler);
+
+      // Publishing should throw since the handler throws
+      expect(() => {
+        PubSub.publish('test-event', 'data');
+      }).toThrow('Handler error');
+
+      expect(errorHandler).toHaveBeenCalled();
+    });
+
+    test('maintains separate event namespaces', () => {
+      const handler1 = vi.fn();
+      const handler2 = vi.fn();
+
+      PubSub.subscribe('user:login', handler1);
+      PubSub.subscribe('user:logout', handler2);
+
+      PubSub.publish('user:login', { userId: 123 });
+
+      expect(handler1).toHaveBeenCalledWith({ userId: 123 });
+      expect(handler2).not.toHaveBeenCalled();
+    });
+  });
+});

package/src/utils/PubSub.ts

@@ -0,0 +1,34 @@
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type AnyFunction = (...args: any[]) => any;
+
+class Pubsub {
+  private events: Record<string, Record<string, AnyFunction>>;
+  constructor() {
+    this.events = {};
+  }
+
+  subscribe(eventName: string, fn: AnyFunction) {
+    const subscriptionId = crypto.randomUUID();
+
+    this.events[eventName] = this.events[eventName] ?? {};
+    this.events[eventName][subscriptionId] = fn;
+    return subscriptionId;
+  }
+
+  unsubscribe(eventName: string, subscriptionId: string) {
+    if (typeof this.events[eventName] !== 'undefined') {
+      delete this.events[eventName][subscriptionId];
+    }
+  }
+
+  publish(eventName: string, data?: unknown) {
+    if (this.events[eventName]) {
+      Object.keys(this.events[eventName]).forEach((key) => {
+        const subscribedFunction = this.events[eventName]![key];
+        subscribedFunction?.(data);
+      });
+    }
+  }
+}
+
+export default new Pubsub();

package/src/utils/SlideoverUtils.ts

@@ -0,0 +1,9 @@
+import type { SlideoverProps } from 'Components/slideover/Slideover';
+import { SLIDEOVER } from './Constants';
+import PubSub from './PubSub';
+
+export const SlideoverUtils = {
+  addSlideover: (slideoverConfig: SlideoverProps) => PubSub.publish(SLIDEOVER.ADD_SLIDEOVER, slideoverConfig),
+  removeSlideover: () => PubSub.publish(SLIDEOVER.REMOVE_SLIDEOVER),
+  removeAllSlideovers: () => PubSub.publish(SLIDEOVER.REMOVE_ALL_SLIDEOVERS),
+};

package/src/utils/getDefaultPopupParent.ts

@@ -0,0 +1,14 @@
+export const getDefaultPopupParent = () => {
+  const element = document.getElementById('ds-popup-parent');
+  if (element) {
+    return element;
+  }
+
+  const newContainer = document.createElement('div');
+  newContainer.id = 'ds-popup-parent';
+  newContainer.style.zIndex = '1';
+  newContainer.style.position = 'relative';
+  document.body.appendChild(newContainer);
+
+  return newContainer;
+};

package/src/utils/hooks/useComponentDidMount.ts

@@ -0,0 +1,5 @@
+import { useEffect, type EffectCallback } from 'react';
+
+export const useComponentDidMount = (callback: EffectCallback) => {
+  useEffect(callback, []);
+};

package/src/utils/hooks/usePubSub.ts

@@ -0,0 +1,12 @@
+import PubSub from 'Utils/PubSub';
+import { useComponentDidMount } from './useComponentDidMount';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const usePubSub = <T extends (...args: any[]) => any>(eventName: string, handler: T) => {
+  useComponentDidMount(() => {
+    const token = PubSub.subscribe(eventName, handler);
+    return () => {
+      PubSub.unsubscribe(eventName, token);
+    };
+  });
+};

package/tokens/export-config.json

@@ -0,0 +1,32 @@
+{
+  "config": {
+    "source": [
+      "**/*.json"
+    ],
+    "platforms": {
+      "css": {
+        "files": [
+          {
+            "format": "css/variables",
+            "options": {
+              "outputReferences": true
+            },
+            "destination": "variables.css"
+          }
+        ],
+        "buildPath": "build/css/",
+        "transforms": [
+          "name/kebab"
+        ],
+        "transformGroup": "tokens-studio"
+      }
+    },
+    "preprocessors": [
+      "tokens-studio"
+    ]
+  },
+  "functions": "import StyleDictionary from 'style-dictionary';\nimport { register } from '@tokens-studio/sd-transforms';\n\n// sd-transforms, 2nd parameter for options can be added\n// See docs: https://github.com/tokens-studio/sd-transforms\nregister(StyleDictionary);\n",
+  "themeOptions": {
+    "Arbor": "included"
+  }
+}

package/tokens/json/$metadata.json

@@ -0,0 +1,5 @@
+{
+  "tokenSetOrder": [
+    "Arbor"
+  ]
+}