@arbor-education/design-system.components 0.1.4 → 0.2.0

package/src/components/table/useTableSettings.ts

@@ -0,0 +1,47 @@
+import { useState } from 'react';
+import { TABLE_SPACING } from './Table';
+import { useComponentDidUpdate } from 'Utils/hooks/useComponentDidUpdate';
+
+export type TableSettings = {
+  hasColumnBorders?: boolean;
+  setHasColumnBorders: (val: boolean) => void;
+  tableSpacing: TABLE_SPACING;
+  setTableSpacing: (val: TABLE_SPACING) => void;
+};
+
+type UseTableSettingsParams = {
+  onTableSettingsChanged?: (val: TableSettings) => void;
+  onTableSettingsReset?: () => void;
+};
+
+export const useTableSettings = (params: UseTableSettingsParams = {}) => {
+  const {
+    onTableSettingsChanged,
+    onTableSettingsReset,
+  } = params;
+  const [hasColumnBorders, setHasColumnBorders] = useState(false);
+  const [tableSpacing, setTableSpacing] = useState(TABLE_SPACING.M);
+
+  const settings = {
+    hasColumnBorders,
+    setHasColumnBorders,
+    tableSpacing,
+    setTableSpacing,
+  };
+
+  const resetSettings = () => {
+    setHasColumnBorders(false);
+    setTableSpacing(TABLE_SPACING.M);
+    if (onTableSettingsReset) {
+      onTableSettingsReset();
+    }
+  };
+
+  useComponentDidUpdate(() => {
+    if (onTableSettingsChanged) {
+      onTableSettingsChanged(settings);
+    }
+  }, [hasColumnBorders, tableSpacing]);
+
+  return { settings, resetSettings };
+};

package/src/index.scss

@@ -6,6 +6,7 @@
 @use "components/card/card.scss";
 @use "components/dropdown/dropdown.scss";
 @use "components/formField/formField.scss";
+@use "components/formField/fieldset/fieldset.scss";
 @use "components/formField/inputs/input.scss";
 @use "components/formField/label/label.scss";
 @use "components/formField/inputs/number/numberInput.scss";
@@ -22,4 +23,5 @@
 @use "components/searchBar/searchBar.scss";
 @use "components/table/pagination/pagination.scss";
 @use "components/tooltip/tooltip.scss";
+@use "components/separator/separator.scss";
 @import "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap";

package/src/index.ts

@@ -19,3 +19,5 @@ export { Table } from 'Components/table/Table';
 export { GridApiContext } from 'Components/table/GridApiContext';
 export { Tooltip } from 'Components/tooltip/Tooltip';
 export { TooltipWrapper } from 'Components/tooltip/TooltipWrapper';
+export { Fieldset } from 'Components/formField/fieldset/Fieldset';
+export { Separator } from 'Components/separator/Separator';

package/src/utils/hooks/useComponentDidMount.test.tsx

@@ -0,0 +1,59 @@
+import { describe, expect, test, vi, beforeEach } from 'vitest';
+import { render } from '@testing-library/react';
+import { useComponentDidMount } from './useComponentDidMount';
+
+describe('useComponentDidMount', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  test('calls callback on mount', () => {
+    const callback = vi.fn();
+
+    const TestComponent = () => {
+      useComponentDidMount(callback);
+      return <div>Test</div>;
+    };
+
+    render(<TestComponent />);
+
+    expect(callback).toHaveBeenCalledTimes(1);
+  });
+
+  test('does not call callback on re-render', () => {
+    const callback = vi.fn();
+
+    const TestComponent = ({ count }: { count: number }) => {
+      useComponentDidMount(callback);
+      return (
+        <div>
+          Test
+          {count}
+        </div>
+      );
+    };
+
+    const { rerender } = render(<TestComponent count={1} />);
+    expect(callback).toHaveBeenCalledTimes(1);
+
+    rerender(<TestComponent count={2} />);
+    expect(callback).toHaveBeenCalledTimes(1);
+  });
+
+  test('calls cleanup function on unmount', () => {
+    const cleanup = vi.fn();
+    const callback = vi.fn(() => cleanup);
+
+    const TestComponent = () => {
+      useComponentDidMount(callback);
+      return <div>Test</div>;
+    };
+
+    const { unmount } = render(<TestComponent />);
+    expect(callback).toHaveBeenCalledTimes(1);
+    expect(cleanup).not.toHaveBeenCalled();
+
+    unmount();
+    expect(cleanup).toHaveBeenCalledTimes(1);
+  });
+});

package/src/utils/hooks/useComponentDidUpdate.test.ts

@@ -0,0 +1,107 @@
+import { expect, test, describe, vi } from 'vitest';
+import { renderHook } from '@testing-library/react';
+import { useComponentDidUpdate } from './useComponentDidUpdate';
+
+describe('useComponentDidUpdate', () => {
+  test('does not call effect on initial render', () => {
+    const effect = vi.fn();
+    renderHook(() => useComponentDidUpdate(effect, []));
+
+    expect(effect).not.toHaveBeenCalled();
+  });
+
+  test('calls effect on subsequent renders when dependencies change', () => {
+    const effect = vi.fn();
+    const { rerender } = renderHook(
+      ({ deps }) => useComponentDidUpdate(effect, deps),
+      { initialProps: { deps: [1] } },
+    );
+
+    expect(effect).not.toHaveBeenCalled();
+
+    rerender({ deps: [2] });
+    expect(effect).toHaveBeenCalledTimes(1);
+  });
+
+  test('does not call effect when dependencies do not change', () => {
+    const effect = vi.fn();
+    const { rerender } = renderHook(
+      ({ deps }) => useComponentDidUpdate(effect, deps),
+      { initialProps: { deps: [1] } },
+    );
+
+    expect(effect).not.toHaveBeenCalled();
+
+    rerender({ deps: [1] });
+    expect(effect).not.toHaveBeenCalled();
+  });
+
+  test('calls effect multiple times on multiple updates', () => {
+    const effect = vi.fn();
+    const { rerender } = renderHook(
+      ({ deps }) => useComponentDidUpdate(effect, deps),
+      { initialProps: { deps: [1] } },
+    );
+
+    rerender({ deps: [2] });
+    expect(effect).toHaveBeenCalledTimes(1);
+
+    rerender({ deps: [3] });
+    expect(effect).toHaveBeenCalledTimes(2);
+
+    rerender({ deps: [4] });
+    expect(effect).toHaveBeenCalledTimes(3);
+  });
+
+  test('calls cleanup function returned from effect', () => {
+    const cleanup = vi.fn();
+    const effect = vi.fn(() => cleanup);
+    const { rerender, unmount } = renderHook(
+      ({ deps }) => useComponentDidUpdate(effect, deps),
+      { initialProps: { deps: [1] } },
+    );
+
+    rerender({ deps: [2] });
+    expect(effect).toHaveBeenCalledTimes(1);
+    expect(cleanup).not.toHaveBeenCalled();
+
+    rerender({ deps: [3] });
+    expect(cleanup).toHaveBeenCalledTimes(1);
+    expect(effect).toHaveBeenCalledTimes(2);
+
+    unmount();
+    expect(cleanup).toHaveBeenCalledTimes(2);
+  });
+
+  test('works with multiple dependencies', () => {
+    const effect = vi.fn();
+    const { rerender } = renderHook(
+      ({ deps }) => useComponentDidUpdate(effect, deps),
+      { initialProps: { deps: [1, 'a', true] } },
+    );
+
+    expect(effect).not.toHaveBeenCalled();
+
+    // Change one dependency
+    rerender({ deps: [1, 'a', false] });
+    expect(effect).toHaveBeenCalledTimes(1);
+
+    // Change another dependency
+    rerender({ deps: [1, 'b', false] });
+    expect(effect).toHaveBeenCalledTimes(2);
+
+    // Change multiple dependencies
+    rerender({ deps: [2, 'c', true] });
+    expect(effect).toHaveBeenCalledTimes(3);
+  });
+
+  test('works with empty dependency array', () => {
+    const effect = vi.fn();
+    const { rerender } = renderHook(() => useComponentDidUpdate(effect, []));
+
+    expect(effect).not.toHaveBeenCalled();
+
+    rerender();
+    expect(effect).not.toHaveBeenCalled();
+  });
+});

package/src/utils/hooks/useComponentDidUpdate.ts

@@ -0,0 +1,19 @@
+import { useEffect, useRef, type DependencyList, type EffectCallback } from 'react';
+
+/**
+ * This is a hook that is functionally identical to useEffect, except it only runs on
+ * updates, never on first render
+ */
+export const useComponentDidUpdate = (effect: EffectCallback, deps: DependencyList) => {
+  const isFirstRenderRef = useRef(true);
+
+  useEffect(() => {
+    if (isFirstRenderRef.current) {
+      isFirstRenderRef.current = false;
+      return;
+    }
+    else {
+      return effect();
+    }
+  }, deps);
+};

package/src/utils/hooks/useGridApi.test.tsx

@@ -0,0 +1,79 @@
+import { describe, expect, test, vi } from 'vitest';
+import { render } from '@testing-library/react';
+import { useGridApi } from './useGridApi';
+import { GridApiContext } from 'Components/table/GridApiContext';
+import type { GridApi } from 'ag-grid-community';
+
+describe('useGridApi', () => {
+  test('returns null gridApi and false isGridApiReady when context is null', () => {
+    let result: { gridApi: GridApi | null; isGridApiReady: boolean } = { gridApi: null, isGridApiReady: false };
+
+    const TestComponent = () => {
+      result = useGridApi();
+      return <div>Test</div>;
+    };
+
+    render(
+      <GridApiContext.Provider value={null}>
+        <TestComponent />
+      </GridApiContext.Provider>,
+    );
+
+    expect(result).not.toBeNull();
+    expect(result?.gridApi).toBeNull();
+    expect(result?.isGridApiReady).toBe(false);
+  });
+
+  test('returns gridApi and true isGridApiReady when context provides gridApi', () => {
+    const mockGridApi = {
+      getDisplayedRowCount: vi.fn(),
+    } as unknown as GridApi;
+
+    let result: { gridApi: GridApi | null; isGridApiReady: boolean } = { gridApi: null, isGridApiReady: false };
+
+    const TestComponent = () => {
+      result = useGridApi();
+      return <div>Test</div>;
+    };
+
+    render(
+      <GridApiContext.Provider value={mockGridApi}>
+        <TestComponent />
+      </GridApiContext.Provider>,
+    );
+
+    expect(result).not.toBeNull();
+    expect(result?.gridApi).toBe(mockGridApi);
+    expect(result?.isGridApiReady).toBe(true);
+  });
+
+  test('updates isGridApiReady when gridApi changes from null to provided', () => {
+    const mockGridApi = {
+      getDisplayedRowCount: vi.fn(),
+    } as unknown as GridApi;
+
+    let result: { gridApi: GridApi | null; isGridApiReady: boolean } = { gridApi: null, isGridApiReady: false };
+
+    const TestComponent = () => {
+      result = useGridApi();
+      return <div>Test</div>;
+    };
+
+    const { rerender } = render(
+      <GridApiContext.Provider value={null}>
+        <TestComponent />
+      </GridApiContext.Provider>,
+    );
+
+    expect(result?.isGridApiReady).toBe(false);
+
+    rerender(
+      <GridApiContext.Provider value={mockGridApi}>
+        <TestComponent />
+      </GridApiContext.Provider>,
+    );
+
+    expect(result?.isGridApiReady).toBe(true);
+    expect(result?.gridApi).toBe(mockGridApi);
+  });
+});

package/src/utils/hooks/useIsMounted.test.tsx

@@ -0,0 +1,63 @@
+import { describe, expect, test } from 'vitest';
+import { render } from '@testing-library/react';
+import { useIsMounted } from './useIsMounted';
+
+describe('useIsMounted', () => {
+  test('returns a ref with current value true when component is mounted', () => {
+    let mountedRef: ReturnType<typeof useIsMounted> | null = null;
+
+    const TestComponent = () => {
+      mountedRef = useIsMounted();
+      return <div>Test</div>;
+    };
+
+    render(<TestComponent />);
+
+    expect(mountedRef).not.toBeNull();
+    expect(mountedRef!.current).toBe(true);
+  });
+
+  test('returns the same ref instance across re-renders', () => {
+    let mountedRef1: ReturnType<typeof useIsMounted> | null = null;
+    let mountedRef2: ReturnType<typeof useIsMounted> | null = null;
+
+    const TestComponent = ({ count }: { count: number }) => {
+      const ref = useIsMounted();
+      if (count === 1) {
+        mountedRef1 = ref;
+      }
+      else {
+        mountedRef2 = ref;
+      }
+      return (
+        <div>
+          Test
+          {count}
+        </div>
+      );
+    };
+
+    const { rerender } = render(<TestComponent count={1} />);
+    rerender(<TestComponent count={2} />);
+
+    expect(mountedRef1).toBe(mountedRef2);
+    expect(mountedRef1!.current).toBe(true);
+  });
+
+  test('sets current to false when component unmounts', () => {
+    let mountedRef: ReturnType<typeof useIsMounted> | null = null;
+
+    const TestComponent = () => {
+      mountedRef = useIsMounted();
+      return <div>Test</div>;
+    };
+
+    const { unmount } = render(<TestComponent />);
+
+    expect(mountedRef!.current).toBe(true);
+
+    unmount();
+
+    expect(mountedRef!.current).toBe(false);
+  });
+});

package/src/utils/hooks/useMemoGenerateUuid.test.tsx

@@ -0,0 +1,80 @@
+import { describe, expect, test, vi, beforeEach } from 'vitest';
+import { render } from '@testing-library/react';
+import { useMemoGenerateUuid } from './useMemoGenerateUuid';
+import { generateUuid } from '../generateUuid';
+
+vi.mock('../generateUuid', () => ({
+  generateUuid: vi.fn((prefix?: string) => {
+    const uuid = '123e4567-e89b-12d3-a456-426614174000';
+    return prefix ? `${prefix}-${uuid}` : uuid;
+  }),
+}));
+
+describe('useMemoGenerateUuid', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  test('generates a UUID without prefix', () => {
+    let uuid: string | null = null;
+
+    const TestComponent = () => {
+      uuid = useMemoGenerateUuid();
+      return <div>Test</div>;
+    };
+
+    render(<TestComponent />);
+
+    expect(uuid).toBe('123e4567-e89b-12d3-a456-426614174000');
+    expect(generateUuid).toHaveBeenCalledWith(undefined);
+  });
+
+  test('generates a UUID with prefix', () => {
+    let uuid: string | null = null;
+
+    const TestComponent = () => {
+      uuid = useMemoGenerateUuid({ prefix: 'test' });
+      return <div>Test</div>;
+    };
+
+    render(<TestComponent />);
+
+    expect(uuid).toBe('test-123e4567-e89b-12d3-a456-426614174000');
+    expect(generateUuid).toHaveBeenCalledWith('test');
+  });
+
+  test('does not generate a new UUID when the dependencies do not change', () => {
+    const TestComponent = ({ count }: { count: number }) => {
+      const uuid = useMemoGenerateUuid();
+      return (
+        <div>
+          Test
+          {count}
+          {uuid}
+        </div>
+      );
+    };
+
+    const { rerender } = render(<TestComponent count={1} />);
+    rerender(<TestComponent count={2} />);
+    expect(generateUuid).toHaveBeenCalledTimes(1);
+  });
+
+  test('generates a new UUID when the dependencies change', () => {
+    const TestComponent = ({ dep1, dep2 }: { dep1: number; dep2: string }) => {
+      const uuid = useMemoGenerateUuid({ deps: [dep1, dep2] });
+
+      return (
+        <div>
+          Test
+          {uuid}
+        </div>
+      );
+    };
+
+    const { rerender } = render(<TestComponent dep1={1} dep2="a" />);
+    rerender(<TestComponent dep1={2} dep2="b" />);
+
+    expect(generateUuid).toHaveBeenCalledTimes(2);
+  });
+});

package/src/utils/hooks/useMemoGenerateUuid.ts

@@ -6,7 +6,7 @@ type Args = {
   prefix?: string;
 };
 
-export const useMemoGenerateUuid = ({ deps = [], prefix }: Args) => {
+export const useMemoGenerateUuid = ({ deps = [], prefix }: Args = {}) => {
   return useMemo(() => {
     return generateUuid(prefix);
   }, deps);

package/src/utils/hooks/usePubSub.test.tsx

@@ -0,0 +1,100 @@
+import { describe, expect, test, vi, afterEach } from 'vitest';
+import { render } from '@testing-library/react';
+import { usePubSub } from './usePubSub';
+import PubSub from 'Utils/PubSub';
+import { generateUuid } from 'Utils/generateUuid';
+
+const mockSubscriptions: Record<string, Record<string, (...args: unknown[]) => void>> = {};
+vi.mock('Utils/PubSub', () => {
+  return {
+    default: {
+      subscribe: vi.fn((eventName: string, handler: (...args: unknown[]) => void) => {
+        const subscriptionId = generateUuid('pubsub-subscription');
+        if (!mockSubscriptions[eventName]) {
+          mockSubscriptions[eventName] = {};
+        }
+        mockSubscriptions[eventName][subscriptionId] = handler;
+        return subscriptionId;
+      }),
+      unsubscribe: vi.fn((eventName: string, subscriptionId: string) => {
+        if (mockSubscriptions[eventName]) {
+          delete mockSubscriptions[eventName][subscriptionId];
+        }
+      }),
+      publish: vi.fn((eventName: string, data?: unknown) => {
+        if (mockSubscriptions[eventName]) {
+          Object.values(mockSubscriptions[eventName]).forEach((handler) => {
+            handler(data);
+          });
+        }
+      }),
+      // Helper to clear subscriptions for testing
+      _clearSubscriptions: () => {
+        Object.keys(mockSubscriptions).forEach((key) => {
+          delete mockSubscriptions[key];
+        });
+      },
+    },
+  };
+});
+
+describe('usePubSub', () => {
+  afterEach(() => {
+    // @ts-expect-error - Accessing private method for testing
+    PubSub._clearSubscriptions?.();
+    vi.clearAllMocks();
+    vi.resetAllMocks();
+    vi.restoreAllMocks();
+  });
+
+  test('subscribes to event on mount', () => {
+    const handler = vi.fn();
+
+    const TestComponent = () => {
+      usePubSub('test-event', handler);
+      return <div>Test</div>;
+    };
+
+    render(<TestComponent />);
+
+    expect(PubSub.subscribe).toHaveBeenCalledTimes(1);
+    expect(PubSub.subscribe).toHaveBeenCalledWith('test-event', handler);
+  });
+
+  test('unsubscribes from event on unmount', () => {
+    const handler = vi.fn();
+
+    const TestComponent = () => {
+      usePubSub('test-event', handler);
+      return <div>Test</div>;
+    };
+
+    const { unmount } = render(<TestComponent />);
+
+    expect(PubSub.subscribe).toHaveBeenCalledTimes(1);
+
+    unmount();
+
+    expect(PubSub.unsubscribe).toHaveBeenCalledWith('test-event', expect.any(String));
+  });
+
+  test('does not resubscribe on re-render', () => {
+    const handler = vi.fn();
+
+    const TestComponent = ({ count }: { count: number }) => {
+      usePubSub('test-event', handler);
+      return (
+        <div>
+          Test
+          {count}
+        </div>
+      );
+    };
+
+    const { rerender } = render(<TestComponent count={1} />);
+    expect(PubSub.subscribe).toHaveBeenCalledTimes(1);
+
+    rerender(<TestComponent count={2} />);
+    expect(PubSub.subscribe).toHaveBeenCalledTimes(1);
+  });
+});

package/vitest.config.ts

@@ -8,6 +8,15 @@ export default defineConfig({
     environment: 'jsdom',
     globals: true,
     setupFiles: ['./setupTestRuntime.ts'],
+    coverage: {
+      reporter: ['lcov'],
+      include: ['src/**/*.{ts,tsx}'],
+      exclude: [
+        'src/**/*.mdx',
+        'src/**/*.{stories,story,test}.{ts,tsx}',
+        'src/**/types.ts',
+      ],
+    },
   },
   resolve: {
     alias: {