@arbor-education/design-system.components 0.1.5 → 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/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);
+};