feat(@deephaven/components): Custom React Spectrum Provider (#1211)

Custom React Spectrum Provider component.

resolves #1210

Author: bmingles

__mocks__/spectrumThemeDarkMock.js

@@ -0,0 +1,3 @@
+module.exports = {
+  'dh-spectrum-theme--dark': 'mock.dark',
+};

__mocks__/spectrumThemeLightMock.js

@@ -0,0 +1,3 @@
+module.exports = {
+  'dh-spectrum-theme--light': 'mock.light',
+};

jest.config.base.cjs

@@ -5,8 +5,14 @@ module.exports = {
     '.(ts|tsx|js|jsx)': ['babel-jest', { rootMode: 'upward' }],
   },
   // Makes jest transform monaco, but continue ignoring other node_modules. Used for MonacoUtils test
-  transformIgnorePatterns: ['node_modules/(?!(monaco-editor|d3-interpolate|d3-color)/)'],
+  transformIgnorePatterns: [
+    'node_modules/(?!(monaco-editor|d3-interpolate|d3-color)/)',
+  ],
   moduleNameMapper: {
+    'SpectrumTheme([^.]+)\\.module\\.scss$': path.join(
+      __dirname,
+      './__mocks__/spectrumTheme$1Mock.js'
+    ),
     '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
     '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': path.join(
       __dirname,

package-lock.json

@@ -29,6 +29,7 @@
     "@deephaven/utils": "file:../utils",
     "@fortawesome/fontawesome-svg-core": "^6.2.1",
     "@fortawesome/react-fontawesome": "^0.2.0",
+    "@react-spectrum/theme-default": "^3.5.1",
     "bootstrap": "4.6.2",
     "classnames": "^2.3.1",
     "event-target-shim": "^6.0.2",

packages/components/package.json

@@ -0,0 +1,28 @@
+/// Utilty for increasing specificity by repeating a given selector n number of
+/// times.
+///
+/// It should work for selectors that can be concatenated without delimiters
+/// such as '.some-selector.some-selector', '#some-id#some-id', or '&&'. A
+/// case where it would not work would be with an element selector e.g. 'divdiv'.
+///
+/// Example usage:
+///
+/// #{multiply-specificity-n('.some-selector', 2)} {
+/// }
+///
+/// would produce
+///
+/// .some-selector.some-selector {
+/// }
+///
+/// @param {string} $selector the selector to duplicate
+/// @param {number} $n number of times to duplicate
+/// @return {string} duplicated selector
+@function multiply-specificity-n($selector, $n) {
+  $result: $selector;
+  @for $i from 2 through $n {
+    $result: selector-append($result, $selector);
+  }
+
+  @return $result;
+}

packages/components/scss/util.scss

@@ -0,0 +1,12 @@
+/**
+  This module contains overrides of React Spectrum css variables for the default
+  `dark` Deephaven theme.
+*/
+@use '../scss/bootstrap_overrides' as bootstrap;
+@use '../scss/util' as *;
+
+// Doubling specificity to ensure this takes precedence over default Spectrum
+// styles.
+#{multiply-specificity-n('.dh-spectrum-theme--dark', 2)} {
+  --spectrum-alias-background-color-default: #{bootstrap.$interfaceblack};
+}

packages/components/src/SpectrumThemeDark.module.scss

@@ -0,0 +1,12 @@
+/**
+  This module contains overrides of React Spectrum css variables for the default
+  `light` Deephaven theme.
+*/
+@use '../scss/bootstrap_overrides' as bootstrap;
+@use '../scss/util' as *;
+
+// Doubling specificity to ensure this takes precedence over default Spectrum
+// styles.
+#{multiply-specificity-n('.dh-spectrum-theme--light', 2)} {
+  --spectrum-alias-background-color-default: #{bootstrap.$interfacewhite};
+}

packages/components/src/SpectrumThemeLight.module.scss

@@ -0,0 +1,22 @@
+import { theme } from '@react-spectrum/theme-default';
+import { themeDHDefault } from './SpectrumUtils';
+
+describe('themeDHDefault', () => {
+  it('should merge Spectrum default with DH custom styles', () => {
+    const { global, light, dark, medium, large } = theme;
+
+    expect(themeDHDefault).toEqual({
+      global,
+      light: {
+        ...light,
+        'dh-spectrum-theme--light': 'mock.light',
+      },
+      dark: {
+        ...dark,
+        'dh-spectrum-theme--dark': 'mock.dark',
+      },
+      medium,
+      large,
+    });
+  });
+});

packages/components/src/SpectrumUtils.test.ts

@@ -0,0 +1,54 @@
+import { theme } from '@react-spectrum/theme-default';
+import darkDH from './SpectrumThemeDark.module.scss';
+import lightDH from './SpectrumThemeLight.module.scss';
+
+const { global, light, dark, medium, large } = theme;
+
+/**
+ * Extend light + dark theme variables with DH defaults.
+ *
+ * A theme is just a mapped collection of css class names that are generated
+ * from a collection of css modules.
+ *
+ * e.g.
+ * {
+ *   global: {
+ *     spectrum: 'spectrum_9e130c',
+ *     'spectrum--medium': 'spectrum--medium_9e130c',
+ *     'spectrum--large': 'spectrum--large_9e130c',
+ *     'spectrum--darkest': 'spectrum--darkest_9e130c',
+ *     'spectrum--dark': 'spectrum--dark_9e130c',
+ *     'spectrum--light': 'spectrum--light_9e130c',
+ *     'spectrum--lightest': 'spectrum--lightest_9e130c',
+ *   },
+ *   light: {
+ *     'spectrum--light': 'spectrum--light_a40724',
+ *     'dh-spectrum-theme--light': '_dh-spectrum-theme--light_1hblg_22',
+ *   },
+ *   dark: {
+ *     'spectrum--darkest': 'spectrum--darkest_256eeb',
+ *     'dh-spectrum-theme--dark': '_dh-spectrum-theme--dark_f7kge_22',
+ *   },
+ *   medium: {
+ *     'spectrum--medium': 'spectrum--medium_4b172c',
+ *   },
+ *   large: {
+ *     'spectrum--large': 'spectrum--large_c40598',
+ *   },
+ * }
+ */
+/* eslint-disable import/prefer-default-export */
+export const themeDHDefault = {
+  global,
+  light: {
+    ...light,
+    ...lightDH,
+  },
+  dark: {
+    ...dark,
+    ...darkDH,
+  },
+  // scales
+  medium,
+  large,
+};