From ba5965f1b4b21067b1122a490183252868916f1a Mon Sep 17 00:00:00 2001 From: Matyas Szabo Date: Mon, 5 Aug 2024 17:22:59 +0200 Subject: [PATCH] fix(ui-color-picker,ui-color-utils): fix corrupted CJS build babel-plugin-transform-imports cannot handle if there are multiple exports from a file. This commit adds a default export which works with this plugin TEST PLAN: make sure the CJS builds do not try to run function from color utils without importing them --- .../babel-plugin-transform-imports/README.md | 6 ++-- .../src/ColorContrast/index.tsx | 17 +++++------ .../src/ColorIndicator/styles.ts | 6 ++-- .../ui-color-picker/src/ColorMixer/index.tsx | 28 +++++++++---------- .../ui-color-picker/src/ColorPicker/index.tsx | 16 +++++------ .../ui-color-picker/src/ColorPreset/index.tsx | 15 ++++++---- packages/ui-color-utils/src/index.ts | 22 ++++++++++++++- 7 files changed, 67 insertions(+), 43 deletions(-) diff --git a/packages/babel-plugin-transform-imports/README.md b/packages/babel-plugin-transform-imports/README.md index 168dae362f..cb6f96b984 100644 --- a/packages/babel-plugin-transform-imports/README.md +++ b/packages/babel-plugin-transform-imports/README.md @@ -21,8 +21,10 @@ Note that any default imports you are currently using will not be transformed: import Text from '@instructure/ui-elements/lib/Text' ``` -[![npm][npm]][npm-url]  -[![MIT License][license-badge]][license]  +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] A babel plugin made by Instructure Inc. diff --git a/packages/ui-color-picker/src/ColorContrast/index.tsx b/packages/ui-color-picker/src/ColorContrast/index.tsx index cb6c877177..10ce6be41c 100644 --- a/packages/ui-color-picker/src/ColorContrast/index.tsx +++ b/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 { //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() { diff --git a/packages/ui-color-picker/src/ColorIndicator/styles.ts b/packages/ui-color-picker/src/ColorIndicator/styles.ts index b297d79b9a..59a100d715 100644 --- a/packages/ui-color-picker/src/ColorIndicator/styles.ts +++ b/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') ) } } diff --git a/packages/ui-color-picker/src/ColorMixer/index.tsx b/packages/ui-color-picker/src/ColorMixer/index.tsx index e46dc4345d..4682c6c830 100644 --- a/packages/ui-color-picker/src/ColorMixer/index.tsx +++ b/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 { `[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 { 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 { > { 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 { 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 { 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} diff --git a/packages/ui-color-picker/src/ColorPicker/index.tsx b/packages/ui-color-picker/src/ColorPicker/index.tsx index c9db9342d8..dbe4376180 100644 --- a/packages/ui-color-picker/src/ColorPicker/index.tsx +++ b/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 { 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 { - this.setState({ mixedColor: colorToHex8(newColor).slice(1) }) + this.setState({ + mixedColor: conversions.colorToHex8(newColor).slice(1) + }) } withAlpha={this.props.colorMixerSettings.colorMixer.withAlpha} rgbRedInputScreenReaderLabel={ diff --git a/packages/ui-color-picker/src/ColorPreset/index.tsx b/packages/ui-color-picker/src/ColorPreset/index.tsx index fbab30cd12..f37dba6326 100644 --- a/packages/ui-color-picker/src/ColorPreset/index.tsx +++ b/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 { 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 { >
- 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 { 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 {