INSTUI-4143 ui-color-picker,ui-color-utils: fix corrupted CJS build

packages/babel-plugin-transform-imports/README.md

@@ -21,6 +21,8 @@ Note that any default imports you are currently using will not be transformed:
 import Text from '@instructure/ui-elements/lib/Text'
 ```
 
+Note that this plugin will fail if the exported name is not the filename! This means that it cannot handle multiple exports from the same file.
+
 [![npm][npm]][npm-url]
 [![MIT License][license-badge]][license]
 [![Code of Conduct][coc-badge]][coc]

packages/ui-color-picker/src/ColorContrast/index.tsx

@@ -29,11 +29,8 @@ import React, { Component } from 'react'
 import { omitProps } from '@instructure/ui-react-utils'
 import { testable } from '@instructure/ui-testable'
 import { error } from '@instructure/console'
-import {
-  contrast as getContrast,
-  colorToRGB,
-  colorToHex8
-} from '@instructure/ui-color-utils'
+import { contrast as getContrast } from '@instructure/ui-color-utils'
+import conversions from '@instructure/ui-color-utils'
 import type { RGBAType } from '@instructure/ui-color-utils'
 import { withStyle, jsx } from '@instructure/emotion'
 
@@ -169,15 +166,19 @@ class ColorContrast extends Component<ColorContrastProps> {
   //We project the firstColor onto an opaque white background, then we project the secondColor onto
   //the projected first color. We calculate the contrast of these two, projected colors.
   get calcContrast() {
-    const c1RGBA = colorToRGB(this.props.firstColor)
-    const c2RGBA = colorToRGB(this.props.secondColor)
+    const c1RGBA = conversions.colorToRGB(this.props.firstColor)
+    const c2RGBA = conversions.colorToRGB(this.props.secondColor)
     const c1OnWhite = this.calcBlendedColor(
       { r: 255, g: 255, b: 255, a: 1 },
       c1RGBA
     )
     const c2OnC1OnWhite = this.calcBlendedColor(c1OnWhite, c2RGBA)
 
-    return getContrast(colorToHex8(c1OnWhite), colorToHex8(c2OnC1OnWhite), 2)
+    return getContrast(
+      conversions.colorToHex8(c1OnWhite),
+      conversions.colorToHex8(c2OnC1OnWhite),
+      2
+    )
   }
 
   render() {

packages/ui-color-picker/src/ColorIndicator/styles.ts

@@ -25,8 +25,8 @@
 import type { ColorIndicatorProps, ColorIndicatorStyle } from './props'
 import type { ColorIndicatorTheme } from '@instructure/shared-types'
 import type { RGBAType } from '@instructure/ui-color-utils'
+import conversions from '@instructure/ui-color-utils'
 import { isValid } from '@instructure/ui-color-utils'
-import { colorToRGB } from '@instructure/ui-color-utils'
 
 const calcBlendedColor = (c1: RGBAType, c2: RGBAType) => {
   // 0.4 as decided by design
@@ -79,8 +79,8 @@ const generateStyle = (
       backgroundSize: componentTheme.backgroundSize,
       backgroundPosition: componentTheme.backgroundPosition,
       borderColor: calcBlendedColor(
-        colorToRGB(componentTheme.colorIndicatorBorderColor),
-        colorToRGB(isValid(color!) ? color! : '#fff')
+        conversions.colorToRGB(componentTheme.colorIndicatorBorderColor),
+        conversions.colorToRGB(isValid(color!) ? color! : '#fff')
       )
     }
   }

packages/ui-color-picker/src/ColorMixer/__new-tests__/ColorMixer.test.tsx

@@ -32,7 +32,7 @@ import '@testing-library/jest-dom'
 import { generateA11yTests } from '@instructure/ui-scripts/lib/test/generateA11yTests'
 import { runAxeCheck } from '@instructure/ui-axe-check'
 import { deepEqual } from '@instructure/ui-utils'
-import { colorToHex8, colorToRGB } from '@instructure/ui-color-utils'
+import conversions from '@instructure/ui-color-utils'
 
 import { ColorMixer } from '../'
 import ColorMixerExamples from '../__examples__/ColorMixer.examples'
@@ -73,7 +73,9 @@ describe('<ColorMixer />', () => {
 
   beforeEach(() => {
     // Mocking console to prevent test output pollution and expect for messages
-    consoleWarningMock = vi.spyOn(console, 'warn').mockImplementation(() => {}) as any
+    consoleWarningMock = vi
+      .spyOn(console, 'warn')
+      .mockImplementation(() => {}) as any
   })
 
   afterEach(() => {
@@ -195,7 +197,7 @@ describe('<ColorMixer />', () => {
         const [r, g, b, a] = inputs.map((input) =>
           Number(input.getAttribute('value'))
         )
-        const colorHex = colorToHex8({ r, g, b, a })
+        const colorHex = conversions.colorToHex8({ r, g, b, a })
         expect(colorHex).toBe(color)
       })
     })
@@ -217,7 +219,7 @@ describe('<ColorMixer />', () => {
         const [r, g, b, a] = inputs.map((input) =>
           Number(input.getAttribute('value'))
         )
-        const rgba = colorToRGB(colorInput)
+        const rgba = conversions.colorToRGB(colorInput)
         rgba.a = Math.round(rgba.a * 100)
         expect(deepEqual(rgba, { r, g, b, a })).toBe(true)
       })
@@ -238,7 +240,7 @@ describe('<ColorMixer />', () => {
       const [r, g, b, a] = inputs.map((input: any) =>
         Number(input.getAttribute('value'))
       )
-      const colorHex = colorToHex8({ r, g, b, a })
+      const colorHex = conversions.colorToHex8({ r, g, b, a })
       expect(colorHex).toBe('#000000FF')
 
       await waitFor(() => {

packages/ui-color-picker/src/ColorMixer/index.tsx

@@ -28,12 +28,8 @@ import { Component } from 'react'
 import { withStyle, jsx } from '@instructure/emotion'
 import { omitProps } from '@instructure/ui-react-utils'
 import { testable } from '@instructure/ui-testable'
-import {
-  colorToHex8,
-  colorToHsva,
-  colorToRGB,
-  isValid
-} from '@instructure/ui-color-utils'
+import { isValid } from '@instructure/ui-color-utils'
+import conversions from '@instructure/ui-color-utils'
 import { logWarn as warn } from '@instructure/console'
 import type { HSVType } from '@instructure/ui-color-utils'
 import ColorPalette from './ColorPalette'
@@ -97,7 +93,7 @@ class ColorMixer extends Component<ColorMixerProps, ColorMixerState> {
       `[ColorMixer] The passed color value is not valid.`
     )
     this.setState({
-      ...colorToHsva(this.props.value!)
+      ...conversions.colorToHsva(this.props.value!)
     })
   }
 
@@ -110,14 +106,14 @@ class ColorMixer extends Component<ColorMixerProps, ColorMixerState> {
       prevState.v !== v ||
       prevState.a !== a
     ) {
-      this.props.onChange(colorToHex8({ h, s, v, a }))
+      this.props.onChange(conversions.colorToHex8({ h, s, v, a }))
     }
     if (
       prevProps.value !== this.props.value &&
-      colorToHex8({ h, s, v, a }) !== this.props.value
+      conversions.colorToHex8({ h, s, v, a }) !== this.props.value
     ) {
       this.setState({
-        ...colorToHsva(this.props.value!)
+        ...conversions.colorToHsva(this.props.value!)
       })
     }
   }
@@ -147,7 +143,7 @@ class ColorMixer extends Component<ColorMixerProps, ColorMixerState> {
       >
         <span
           css={styles?.sliderAndPaletteContainer}
-          aria-label={`${colorToHex8({ h, s, v, a })}`}
+          aria-label={`${conversions.colorToHex8({ h, s, v, a })}`}
           aria-live="polite"
         >
           <ColorPalette
@@ -177,7 +173,7 @@ class ColorMixer extends Component<ColorMixerProps, ColorMixerState> {
             value={h}
             minValue={0}
             maxValue={359}
-            color={colorToHex8({ h, s, v, a })}
+            color={conversions.colorToHex8({ h, s, v, a })}
             onChange={(hue: number) => {
               this.setState({ h: hue })
             }}
@@ -191,7 +187,7 @@ class ColorMixer extends Component<ColorMixerProps, ColorMixerState> {
               width={this._width}
               height={this._sliderHeight}
               indicatorRadius={this._sliderIndicatorRadius}
-              color={colorToHex8({ h, s, v })}
+              color={conversions.colorToHex8({ h, s, v })}
               value={a}
               minValue={0}
               maxValue={1}
@@ -206,8 +202,10 @@ class ColorMixer extends Component<ColorMixerProps, ColorMixerState> {
           disabled={disabled}
           label={withAlpha ? 'RGBA' : 'RGB'}
           width={this._width}
-          value={colorToRGB({ h, s, v, a })}
-          onChange={(color) => this.setState({ ...colorToHsva(color) })}
+          value={conversions.colorToRGB({ h, s, v, a })}
+          onChange={(color) =>
+            this.setState({ ...conversions.colorToHsva(color) })
+          }
           withAlpha={withAlpha}
           rgbRedInputScreenReaderLabel={rgbRedInputScreenReaderLabel}
           rgbGreenInputScreenReaderLabel={rgbGreenInputScreenReaderLabel}

packages/ui-color-picker/src/ColorPicker/__new-tests__/ColorPicker.test.tsx

@@ -31,7 +31,7 @@ import '@testing-library/jest-dom'
 // eslint-disable-next-line no-restricted-imports
 import { generateA11yTests } from '@instructure/ui-scripts/lib/test/generateA11yTests'
 import { runAxeCheck } from '@instructure/ui-axe-check'
-import { color2hex, colorToRGB } from '@instructure/ui-color-utils'
+import conversions from '@instructure/ui-color-utils'
 
 import ColorPickerExamples from '../__examples__/ColorPicker.examples'
 import type { ColorPickerProps } from '../props'
@@ -56,8 +56,12 @@ describe('<ColorPicker />', () => {
 
   beforeEach(() => {
     // Mocking console to prevent test output pollution and expect for messages
-    consoleErrorMock = vi.spyOn(console, 'error').mockImplementation(() => {}) as any
-    consoleWarningMock = vi.spyOn(console, 'warn').mockImplementation(() => {}) as any
+    consoleErrorMock = vi
+      .spyOn(console, 'error')
+      .mockImplementation(() => {}) as any
+    consoleWarningMock = vi
+      .spyOn(console, 'warn')
+      .mockImplementation(() => {}) as any
   })
 
   afterEach(() => {
@@ -507,7 +511,7 @@ describe('<ColorPicker />', () => {
         const greenInput = screen.getByLabelText(
           'Green input'
         ) as HTMLInputElement
-        const convertedColor = colorToRGB(`#${color}`)
+        const convertedColor = conversions.colorToRGB(`#${color}`)
 
         const actualColor = {
           r: parseInt(redInput.value),
@@ -563,7 +567,7 @@ describe('<ColorPicker />', () => {
 
         fireEvent.click(addBtn)
 
-        expect(onChange).toHaveBeenCalledWith(color2hex(rgb))
+        expect(onChange).toHaveBeenCalledWith(conversions.color2hex(rgb))
       })
     })
   })

packages/ui-color-picker/src/ColorPicker/index.tsx

@@ -30,12 +30,8 @@ import { withStyle, jsx } from '@instructure/emotion'
 import { warn, error } from '@instructure/console'
 import { omitProps } from '@instructure/ui-react-utils'
 import { testable } from '@instructure/ui-testable'
-import {
-  colorToHex8,
-  isValid,
-  contrast as getContrast
-} from '@instructure/ui-color-utils'
-
+import { isValid, contrast as getContrast } from '@instructure/ui-color-utils'
+import conversions from '@instructure/ui-color-utils'
 import { TextInput } from '@instructure/ui-text-input'
 import { Tooltip } from '@instructure/ui-tooltip'
 import { Button, IconButton } from '@instructure/ui-buttons'
@@ -444,7 +440,9 @@ class ColorPicker extends Component<ColorPickerProps, ColorPickerState> {
           children(
             `#${this.mixedColorWithStrippedAlpha}`,
             (newColor: string) => {
-              this.setState({ mixedColor: colorToHex8(newColor).slice(1) })
+              this.setState({
+                mixedColor: conversions.colorToHex8(newColor).slice(1)
+              })
             },
             () => {
               this.setState({
@@ -470,7 +468,9 @@ class ColorPicker extends Component<ColorPickerProps, ColorPickerState> {
           <ColorMixer
             value={`#${this.state.mixedColor}`}
             onChange={(newColor: string) =>
-              this.setState({ mixedColor: colorToHex8(newColor).slice(1) })
+              this.setState({
+                mixedColor: conversions.colorToHex8(newColor).slice(1)
+              })
             }
             withAlpha={this.props.colorMixerSettings.colorMixer.withAlpha}
             rgbRedInputScreenReaderLabel={

packages/ui-color-picker/src/ColorPreset/index.tsx

@@ -28,7 +28,7 @@ import { Component } from 'react'
 import { withStyle, jsx } from '@instructure/emotion'
 import { omitProps } from '@instructure/ui-react-utils'
 import { testable } from '@instructure/ui-testable'
-import { colorToHex8, colorToRGB } from '@instructure/ui-color-utils'
+import conversions from '@instructure/ui-color-utils'
 
 import { IconButton, Button } from '@instructure/ui-buttons'
 import { View } from '@instructure/ui-view'
@@ -101,7 +101,10 @@ class ColorPreset extends Component<ColorPresetProps, ColorPresetState> {
 
   isSelectedColor(color: string) {
     const { selected } = this.props
-    return !!selected && colorToHex8(selected) === colorToHex8(color)
+    return (
+      !!selected &&
+      conversions.colorToHex8(selected) === conversions.colorToHex8(color)
+    )
   }
 
   onMenuItemSelected =
@@ -149,9 +152,9 @@ class ColorPreset extends Component<ColorPresetProps, ColorPresetState> {
     >
       <div css={this.props.styles?.popoverContent}>
         <ColorMixer
-          value={colorToHex8(this.state.newColor)}
+          value={conversions.colorToHex8(this.state.newColor)}
           onChange={(newColor: string) =>
-            this.setState({ newColor: colorToRGB(newColor) })
+            this.setState({ newColor: conversions.colorToRGB(newColor) })
           }
           withAlpha={this.props?.colorMixerSettings?.colorMixer?.withAlpha}
           rgbRedInputScreenReaderLabel={
@@ -189,7 +192,7 @@ class ColorPreset extends Component<ColorPresetProps, ColorPresetState> {
               firstColor={
                 this.props.colorMixerSettings.colorContrast.firstColor
               }
-              secondColor={colorToHex8(this.state.newColor)}
+              secondColor={conversions.colorToHex8(this.state.newColor)}
               label={this.props.colorMixerSettings.colorContrast.label}
               successLabel={
                 this.props.colorMixerSettings.colorContrast.successLabel
@@ -220,7 +223,7 @@ class ColorPreset extends Component<ColorPresetProps, ColorPresetState> {
         <Button
           onClick={() => {
             this.props?.colorMixerSettings?.onPresetChange([
-              colorToHex8(this.state.newColor),
+              conversions.colorToHex8(this.state.newColor),
               ...this.props.colors
             ])
             this.setState({ openAddNew: false })

packages/ui-color-utils/src/index.ts

@@ -27,11 +27,31 @@ export { darken } from './darken'
 export { lighten } from './lighten'
 export { contrast } from './contrast'
 export { isValid } from './isValid'
-export { color2hex } from './conversions'
 export {
+  color2hex,
   colorToHex8,
   colorToHsva,
   colorToHsla,
   colorToRGB
 } from './conversions'
+
+import {
+  color2hex,
+  colorToHex8,
+  colorToHsva,
+  colorToHsla,
+  colorToRGB
+} from './conversions'
+
+// TODO remove when we get rid of babel-plugin-transform-imports
+// This default export is needed because babel-plugin-transform-imports will
+// fail if the exported name is not the same as the filename
+export default {
+  color2hex: color2hex,
+  colorToHex8: colorToHex8,
+  colorToHsva: colorToHsva,
+  colorToHsla: colorToHsla,
+  colorToRGB: colorToRGB
+}
+
 export type { RGBType, HSVType, HSLType, RGBAType } from './colorTypes'