Merge branch 'master' of https://github.com/casesandberg/react-color

casesandberg · casesandberg · commit 8849f74a7ff9 · 2020-10-27T22:40:51.000-07:00
diff --git a/src/components/alpha/spec.js b/src/components/alpha/spec.js
@@ -3,7 +3,7 @@
 import React from 'react'
 import renderer from 'react-test-renderer'
 import { mount } from 'enzyme'
-import color, { red } from '../../helpers/color'
+import * as color from '../../helpers/color'
 // import canvas from 'canvas'
 
 import Alpha from './Alpha'
@@ -12,14 +12,14 @@ import AlphaPointer from './AlphaPointer'
 
 test('Alpha renders correctly', () => {
   const tree = renderer.create(
-    <Alpha { ...red } />,
+    <Alpha { ...color.red } />,
   ).toJSON()
   expect(tree).toMatchSnapshot()
 })
 
 // test('Alpha renders on server correctly', () => {
 //   const tree = renderer.create(
-//     <Alpha renderers={{ canvas }} { ...red } />
+//     <Alpha renderers={{ canvas }} { ...color.red } />
 //   ).toJSON()
 //   expect(tree).toMatchSnapshot()
 // })
@@ -29,7 +29,7 @@ test('Alpha onChange events correctly', () => {
     expect(color.simpleCheckForValidColor(data)).toBeTruthy()
   })
   const tree = mount(
-    <Alpha { ...red } width={ 20 } height={ 200 } onChange={ changeSpy } />,
+    <Alpha { ...color.red } width={ 20 } height={ 200 } onChange={ changeSpy } />,
   )
   expect(changeSpy).toHaveBeenCalledTimes(0)
   const alphaCommon = tree.find(CommonAlpha)
@@ -42,7 +42,7 @@ test('Alpha onChange events correctly', () => {
 
 test('Alpha renders vertically', () => {
   const tree = renderer.create(
-    <Alpha { ...red } width={ 20 } height={ 200 } direction="vertical" />,
+    <Alpha { ...color.red } width={ 20 } height={ 200 } direction="vertical" />,
   ).toJSON()
   expect(tree).toMatchSnapshot()
 })
diff --git a/src/components/block/Block.js b/src/components/block/Block.js
@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import reactCSS from 'reactcss'
 import merge from 'lodash/merge'
-import color from '../../helpers/color'
+import * as color from '../../helpers/color'
 
 import { ColorWrap, EditableInput, Checkboard } from '../common'
 import BlockSwatches from './BlockSwatches'
diff --git a/src/components/block/spec.js b/src/components/block/spec.js
@@ -7,7 +7,7 @@ import { mount } from 'enzyme'
 import Block from './Block'
 import BlockSwatches from './BlockSwatches'
 import { Swatch } from '../common'
-import color from '../../helpers/color'
+import* as color from '../../helpers/color'
 
 test('Block renders correctly', () => {
   const tree = renderer.create(
diff --git a/src/components/chrome/ChromeFields.js b/src/components/chrome/ChromeFields.js
@@ -2,7 +2,7 @@
 
 import React from 'react'
 import reactCSS from 'reactcss'
-import color from '../../helpers/color'
+import * as color from '../../helpers/color'
 import isUndefined from 'lodash/isUndefined'
 
 import { EditableInput } from '../common'
diff --git a/src/components/chrome/spec.js b/src/components/chrome/spec.js
@@ -2,7 +2,7 @@
 
 import React from 'react'
 import renderer from 'react-test-renderer'
-import color, { red } from '../../helpers/color'
+import * as color from '../../helpers/color'
 import { mount } from 'enzyme'
 
 import Chrome from './Chrome'
@@ -14,7 +14,7 @@ import { Alpha } from '../common'
 
 test('Chrome renders correctly', () => {
   const tree = renderer.create(
-    <Chrome { ...red } />,
+    <Chrome { ...color.red } />,
   ).toJSON()
   expect(tree).toMatchSnapshot()
 })
@@ -24,7 +24,7 @@ test('Chrome onChange events correctly', () => {
     expect(color.simpleCheckForValidColor(data)).toBeTruthy()
   })
   const tree = mount(
-    <Chrome { ...red } onChange={ changeSpy } />,
+    <Chrome { ...color.red } onChange={ changeSpy } />,
   )
   expect(changeSpy).toHaveBeenCalledTimes(0)
 
@@ -43,14 +43,14 @@ test('Chrome onChange events correctly', () => {
 
 // test('Chrome renders on server correctly', () => {
 //   const tree = renderer.create(
-//     <Chrome renderers={{ canvas }} { ...red } />
+//     <Chrome renderers={{ canvas }} { ...color.red } />
 //   ).toJSON()
 //   expect(tree).toMatchSnapshot()
 // })
 
 test('ChromeFields renders correctly', () => {
   const tree = renderer.create(
-    <ChromeFields { ...red } />,
+    <ChromeFields { ...color.red } />,
   ).toJSON()
   expect(tree).toMatchSnapshot()
 })
@@ -81,4 +81,4 @@ test('Chrome renders correctly with width', () => {
     <Chrome width={300} />,
   ).toJSON()
   expect(tree.props.style.width).toBe(300)
-});
+});
diff --git a/src/components/circle/spec.js b/src/components/circle/spec.js
@@ -7,7 +7,7 @@ import { mount } from 'enzyme'
 import Circle from './Circle'
 import CircleSwatch from './CircleSwatch'
 import { Swatch } from '../common'
-import color from '../../helpers/color'
+import * as color from '../../helpers/color'
 
 test('Circle renders correctly', () => {
   const tree = renderer.create(
diff --git a/src/components/common/ColorWrap.js b/src/components/common/ColorWrap.js
@@ -1,6 +1,6 @@
 import React, { Component, PureComponent } from 'react'
 import debounce from 'lodash/debounce'
-import color from '../../helpers/color'
+import * as color from '../../helpers/color'
 
 export const ColorWrap = (Picker) => {
   class ColorPicker extends (PureComponent || Component) {
diff --git a/src/components/compact/Compact.js b/src/components/compact/Compact.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import reactCSS from 'reactcss'
 import map from 'lodash/map'
 import merge from 'lodash/merge'
-import color from '../../helpers/color'
+import * as color from '../../helpers/color'
 
 import { ColorWrap, Raised } from '../common'
 import CompactColor from './CompactColor'
diff --git a/src/components/compact/CompactColor.js b/src/components/compact/CompactColor.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import reactCSS from 'reactcss'
-import colorUtils from '../../helpers/color'
+import * as colorUtils from '../../helpers/color'
 
 import { Swatch } from '../common'
 
diff --git a/src/components/compact/spec.js b/src/components/compact/spec.js
@@ -3,7 +3,7 @@
 import React from 'react'
 import renderer from 'react-test-renderer'
 import { mount } from 'enzyme'
-import color, { red } from '../../helpers/color'
+import * as color from '../../helpers/color'
 
 import Compact from './Compact'
 import CompactColor from './CompactColor'
@@ -12,14 +12,14 @@ import { Swatch } from '../common'
 
 test('Compact renders correctly', () => {
   const tree = renderer.create(
-    <Compact { ...red } />,
+    <Compact { ...color.red } />,
   ).toJSON()
   expect(tree).toMatchSnapshot()
 })
 
 test('Compact with onSwatchHover renders correctly', () => {
   const tree = renderer.create(
-    <Compact { ...red } onSwatchHover={ () => {} } />,
+    <Compact { ...color.red } onSwatchHover={ () => {} } />,
   ).toJSON()
   expect(tree).toMatchSnapshot()
 })
@@ -29,7 +29,7 @@ test('Compact onChange events correctly', () => {
     expect(color.simpleCheckForValidColor(data)).toBeTruthy()
   })
   const tree = mount(
-    <Compact { ...red } onChange={ changeSpy } />,
+    <Compact { ...color.red } onChange={ changeSpy } />,
   )
   expect(changeSpy).toHaveBeenCalledTimes(0)
   const swatches = tree.find(Swatch)
@@ -43,7 +43,7 @@ test('Compact with onSwatchHover events correctly', () => {
     expect(color.simpleCheckForValidColor(data)).toBeTruthy()
   })
   const tree = mount(
-    <Compact { ...red } onSwatchHover={ hoverSpy } />,
+    <Compact { ...color.red } onSwatchHover={ hoverSpy } />,
   )
   expect(hoverSpy).toHaveBeenCalledTimes(0)
   const swatches = tree.find(Swatch)
@@ -61,14 +61,14 @@ test('CompactColor renders correctly', () => {
 
 test('CompactFields renders correctly', () => {
   const tree = renderer.create(
-    <CompactFields { ...red } />,
+    <CompactFields { ...color.red } />,
   ).toJSON()
   expect(tree).toMatchSnapshot()
 })
 
 test('Compact renders custom styles correctly', () => {
   const tree = renderer.create(
-    <Compact { ...red } styles={{ default: { wrap: { boxShadow: '0 0 10px red' } } }} />,
+    <Compact { ...color.red } styles={{ default: { wrap: { boxShadow: '0 0 10px red' } } }} />,
   ).toJSON()
   expect(tree.props.style.boxShadow).toBe('0 0 10px red')
 })
diff --git a/src/components/github/spec.js b/src/components/github/spec.js
@@ -3,15 +3,15 @@
 import React from 'react'
 import renderer from 'react-test-renderer'
 import { mount } from 'enzyme'
-import color, { red } from '../../helpers/color'
+import * as color from '../../helpers/color'
 
 import Github from './Github'
 import GithubSwatch from './GithubSwatch'
 import { Swatch } from '../common'
 
 test('Github renders correctly', () => {
   const tree = renderer.create(
-    <Github { ...red } />,
+    <Github { ...color.red } />,
   ).toJSON()
   expect(tree).toMatchSnapshot()
 })
@@ -46,21 +46,21 @@ test('Github with onSwatchHover events correctly', () => {
 
 test('Github `triangle="hide"`', () => {
   const tree = renderer.create(
-    <Github { ...red } triangle="hide" />,
+    <Github { ...color.red } triangle="hide" />,
   ).toJSON()
   expect(tree).toMatchSnapshot()
 })
 
 test('Github `triangle="top-right"`', () => {
   const tree = renderer.create(
-    <Github { ...red } triangle="top-right" />,
+    <Github { ...color.red } triangle="top-right" />,
   ).toJSON()
   expect(tree).toMatchSnapshot()
 })
 
 test('Github renders custom styles correctly', () => {
   const tree = renderer.create(
-    <Github { ...red } styles={{ default: { card: { boxShadow: '0 0 10px red' } } }} />,
+    <Github { ...color.red } styles={{ default: { card: { boxShadow: '0 0 10px red' } } }} />,
   ).toJSON()
   expect(tree.props.style.boxShadow).toBe('0 0 10px red')
 })
diff --git a/src/components/google/GoogleFields.js b/src/components/google/GoogleFields.js
@@ -1,13 +1,13 @@
 import React from 'react'
 import reactCSS from 'reactcss'
-import color from '../../helpers/color'
+import * as color from '../../helpers/color'
 import { EditableInput } from '../common'
 
 
 export const GoogleFields = ({ onChange, rgb, hsl, hex, hsv }) => {
 
   const handleChange = (data, e) => {
-    if (data.hex) {      
+    if (data.hex) {
       color.isValidHex(data.hex) && onChange({
         hex: data.hex,
         source: 'hex',
@@ -22,7 +22,7 @@ export const GoogleFields = ({ onChange, rgb, hsl, hex, hsv }) => {
         source: 'rgb',
       }, e)
     } else if (data.hsv){
-      const values = data.hsv.split(',')      
+      const values = data.hsv.split(',')
       if (color.isvalidColorString(data.hsv, 'hsv')){
         values[2] = values[2].replace('%', '')
         values[1] = values[1].replace('%', '')
@@ -138,7 +138,7 @@ export const GoogleFields = ({ onChange, rgb, hsl, hex, hsv }) => {
     },
   })
 
-  const rgbValue = `${ rgb.r }, ${ rgb.g }, ${ rgb.b }`    
+  const rgbValue = `${ rgb.r }, ${ rgb.g }, ${ rgb.b }`
   const hslValue = `${ Math.round(hsl.h) }°, ${ Math.round(hsl.s * 100) }%, ${ Math.round(hsl.l * 100) }%`
   const hsvValue = `${ Math.round(hsv.h) }°, ${ Math.round(hsv.s * 100) }%, ${ Math.round(hsv.v * 100) }%`
 
@@ -159,7 +159,7 @@ export const GoogleFields = ({ onChange, rgb, hsl, hex, hsv }) => {
               style={{ input: styles.input2, label: styles.label2 }}
               label="rgb"
               value={ rgbValue }
-              onChange={ handleChange }  
+              onChange={ handleChange }
             />
           </div>
           <div style={ styles.single }>
@@ -184,4 +184,4 @@ export const GoogleFields = ({ onChange, rgb, hsl, hex, hsv }) => {
   )
 }
 
-export default GoogleFields
+export default GoogleFields
diff --git a/src/components/google/spec.js b/src/components/google/spec.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import renderer from 'react-test-renderer'
-import color, { red } from '../../helpers/color'
+import * as color from '../../helpers/color'
 import { mount } from 'enzyme'
 
 import Google from './Google'
@@ -10,23 +10,23 @@ import GooglePointerCircle from './GooglePointerCircle'
 
 
 test('Google renders correctly', () => {
-  const tree = renderer.create(<Google { ...red } />).toJSON()
+  const tree = renderer.create(<Google { ...color.red } />).toJSON()
   expect(tree).toMatchSnapshot()
 })
 test('Google onChange events correctly', () => {
   const changeSpy = jest.fn((data) => {
     expect(color.simpleCheckForValidColor(data)).toBeTruthy()
   })
   const tree = mount(
-    <Google { ...red } onChange={ changeSpy } />,
+    <Google { ...color.red } onChange={ changeSpy } />,
   )
   expect(changeSpy).toHaveBeenCalledTimes(0)
 })
 
 
 test('GoogleFields renders correctly', () => {
   const tree = renderer.create(
-    <GoogleFields { ...red } />,
+    <GoogleFields { ...color.red } />,
   ).toJSON()
   expect(tree).toMatchSnapshot()
 })
diff --git a/src/components/material/Material.js b/src/components/material/Material.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import reactCSS from 'reactcss'
 import merge from 'lodash/merge'
-import color from '../../helpers/color'
+import * as color from '../../helpers/color'
 
 import { ColorWrap, EditableInput, Raised } from '../common'
 
diff --git a/src/components/photoshop/PhotoshopFields.js b/src/components/photoshop/PhotoshopFields.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import reactCSS from 'reactcss'
-import color from '../../helpers/color'
+import * as color from '../../helpers/color'
 
 import { EditableInput } from '../common'
 
diff --git a/src/components/sketch/SketchFields.js b/src/components/sketch/SketchFields.js
@@ -2,7 +2,7 @@
 
 import React from 'react'
 import reactCSS from 'reactcss'
-import color from '../../helpers/color'
+import * as color from '../../helpers/color'
 
 import { EditableInput } from '../common'
 
diff --git a/src/components/sketch/spec.js b/src/components/sketch/spec.js
diff --git a/src/components/swatches/SwatchesColor.js b/src/components/swatches/SwatchesColor.js
diff --git a/src/components/swatches/spec.js b/src/components/swatches/spec.js
diff --git a/src/components/twitter/Twitter.js b/src/components/twitter/Twitter.js
diff --git a/src/components/twitter/spec.js b/src/components/twitter/spec.js
diff --git a/src/helpers/color.js b/src/helpers/color.js
diff --git a/src/helpers/spec.js b/src/helpers/spec.js
