Skip to content

Commit 8e7d281

Browse files
authored
Remove styled-components (closes #56) (#113)
* Remove styled components (closes #56) * Update storybook * Fix and document tests * Fix linting errors (#113) * Update yarn lock * ColorButton: set default values
1 parent 9ffc32d commit 8e7d281

21 files changed

+3685
-4139
lines changed

.storybook/ThemeProvider.js

Lines changed: 11 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,28 @@
1-
import React from "react";
2-
import PropTypes from "prop-types";
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
33

4-
import CssBaseline from "@material-ui/core/CssBaseline";
5-
import { MuiThemeProvider } from "@material-ui/core/styles";
6-
import { StylesProvider } from "@material-ui/styles";
7-
8-
import { ThemeProvider as StyledThemeProvider } from "styled-components";
4+
import CssBaseline from '@material-ui/core/CssBaseline';
5+
import { ThemeProvider as StyledThemeProvider } from '@material-ui/core/styles';
6+
import { StylesProvider } from '@material-ui/styles';
7+
import { createMuiTheme } from '@material-ui/core';
98

109
const ThemeProvider = ({ theme, children }) => {
11-
const nextTheme = Object.assign({}, theme);
10+
const { locale, ...options } = theme;
11+
const nextTheme = createMuiTheme(options, locale);
1212

1313
return (
1414
<StylesProvider injectFirst>
1515
<StyledThemeProvider theme={nextTheme}>
16-
<MuiThemeProvider theme={nextTheme}>
17-
<CssBaseline />
18-
{children}
19-
</MuiThemeProvider>
16+
<CssBaseline />
17+
{children}
2018
</StyledThemeProvider>
2119
</StylesProvider>
2220
);
2321
};
2422

2523
ThemeProvider.propTypes = {
2624
children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
27-
theme: PropTypes.object.isRequired
25+
theme: PropTypes.object.isRequired,
2826
};
2927

3028
export default ThemeProvider;

.storybook/darkTheme.js

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
1-
import { createMuiTheme } from "@material-ui/core/styles";
2-
3-
const darkTheme = createMuiTheme({
1+
const darkTheme = {
42
name: 'Dark Theme',
53
palette: {
64
type: 'dark',
75
},
8-
});
6+
};
97

108
export default darkTheme;

.storybook/frenchTheme.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
import { createMuiTheme } from "@material-ui/core/styles";
21
import { frFR } from '@material-ui/core/locale';
32

4-
const frenchTheme = createMuiTheme({
3+
const frenchTheme = {
54
name: 'Dark French Theme',
65
palette: {
76
type: 'dark',
87
},
9-
}, frFR);
8+
locale: frFR,
9+
};
1010

1111
export default frenchTheme;

.storybook/lightTheme.js

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
1-
import { createMuiTheme } from "@material-ui/core/styles";
2-
3-
const lightTheme = createMuiTheme({
1+
const lightTheme = {
42
name: 'Light Theme',
53
palette: {
64
type: 'light',
75
},
8-
});
6+
};
97

108
export default lightTheme;

.storybook/main.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
module.exports = {
22
stories: ['../stories/**/*.stories.(js|mdx)'],
3-
addons: ['@storybook/addon-actions', '@storybook/addon-links', 'storybook-addon-styled-component-theme', '@storybook/addon-docs'],
3+
addons: ['@storybook/addon-actions', '@storybook/addon-links', '@storybook/addon-docs', '@react-theming/storybook-addon'],
44
};

.storybook/manager.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { addons } from '@storybook/addons';
22
import '@storybook/addon-actions/register';
33
import '@storybook/addon-links/register';
4-
import 'storybook-addon-styled-component-theme/dist/register';
4+
import '@react-theming/storybook-addon';
55
import muiccTheme from './muiccTheme';
66

77
addons.setConfig({

.storybook/preview.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,14 @@ import { addParameters } from '@storybook/react';
33
import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks';
44
import { addDecorator } from '@storybook/react';
55
import { withKnobs } from "@storybook/addon-knobs";
6-
import { withThemesProvider } from 'storybook-addon-styled-component-theme';
6+
import { withThemes } from '@react-theming/storybook-addon/dist/preview';
77
import ThemeProvider from './ThemeProvider';
88
import lightTheme from './lightTheme';
99
import darkTheme from './darkTheme';
1010
import frenchTheme from './frenchTheme';
1111

1212
const themes = [lightTheme, darkTheme, frenchTheme];
13-
addDecorator(withThemesProvider(themes, ThemeProvider));
13+
addDecorator(withThemes(ThemeProvider, themes));
1414
addDecorator(withKnobs);
1515
addDecorator(storyFn => <div style={{ padding: '48px' }}>{storyFn()}</div>);
1616
addParameters({

README.md

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,6 @@
4747
## Why another ColorPicker ?
4848

4949
- Fully compatible with Material-UI : theming and low level components
50-
- Styled with `styled-components`
5150
- Highly customizable ColorPicker : gradient picker, palette, input format, deferred mode
5251
- Small in size (<30kb) without any direct dependencies
5352
- Use modern React hook and coding conventions
@@ -67,7 +66,7 @@ https://mikbry.github.io/material-ui-color/
6766

6867
## Requirements
6968
- Works on modern browsers supporting ES6+ (Not compatible with IE)
70-
- React, Styled-Component and Material-UI frameworks
69+
- React and Material-UI frameworks
7170

7271
## Install
7372

@@ -90,7 +89,6 @@ you need to have in your dependencies:
9089
"prop-types": "^15.7.2",
9190
"react": "^17.0.1",
9291
"react-dom": "^17.0.1",
93-
"styled-components": "^5.2.1"
9492
```
9593

9694
`material-ui-color` bring 5 components.

package.json

Lines changed: 12 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -41,17 +41,18 @@
4141
"@commitlint/cli": "^8.3.5",
4242
"@commitlint/config-conventional": "^8.3.4",
4343
"@material-ui/core": "^4.11.2",
44+
"@react-theming/storybook-addon": "^1.0.3",
4445
"@rollup/plugin-node-resolve": "^7.1.1",
4546
"@rollup/plugin-replace": "^2.3.1",
4647
"@rollup/plugin-url": "^4.0.2",
47-
"@storybook/addon-actions": "^5.2.6",
48-
"@storybook/addon-docs": "^5.3.18",
49-
"@storybook/addon-knobs": "^5.3.18",
50-
"@storybook/addon-links": "^5.2.6",
51-
"@storybook/addons": "^5.2.6",
52-
"@storybook/react": "^5.2.6",
53-
"@testing-library/jest-dom": "^5.3.0",
54-
"@testing-library/react": "^10.0.1",
48+
"@storybook/addon-actions": "^6.1.21",
49+
"@storybook/addon-docs": "^6.1.21",
50+
"@storybook/addon-knobs": "^6.1.21",
51+
"@storybook/addon-links": "^6.1.21",
52+
"@storybook/addons": "^6.1.21",
53+
"@storybook/react": "^6.1.21",
54+
"@testing-library/jest-dom": "^5.11.9",
55+
"@testing-library/react": "^11.2.5",
5556
"babel-jest": "^25.1.0",
5657
"babel-loader": "^8.0.6",
5758
"cross-env": "^7.0.0",
@@ -65,9 +66,8 @@
6566
"eslint-plugin-react": "^7.18.3",
6667
"eslint-plugin-react-hooks": "^2.3.0",
6768
"husky": "^5.1.3",
68-
"jest": "^25.1.0",
69+
"jest": "^26.6.3",
6970
"jest-css-modules": "^2.1.0",
70-
"jest-styled-components": "^7.0.0",
7171
"material-ui-popup-state": "^1.7.1",
7272
"packito": "^0.5.0",
7373
"prettier": "^1.19.1",
@@ -82,9 +82,7 @@
8282
"rollup-plugin-hot-css": "^0.0.6",
8383
"rollup-plugin-react-refresh": "^0.0.1",
8484
"rollup-plugin-string": "^3.0.0",
85-
"rollup-plugin-terser": "^5.2.0",
86-
"storybook-addon-styled-component-theme": "^1.3.0",
87-
"styled-components": "^5.2.1"
85+
"rollup-plugin-terser": "^5.2.0"
8886
},
8987
"husky": {
9088
"hooks": {
@@ -102,8 +100,7 @@
102100
"material-ui-popup-state": "^1.5.3",
103101
"prop-types": "^15.7.2",
104102
"react": "^16.12.0",
105-
"react-dom": "^16.12.0",
106-
"styled-components": "^5.0.1"
103+
"react-dom": "^16.12.0"
107104
},
108105
"dependencies": {},
109106
"jest": {

rollup.config.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,6 @@ export default {
2424
'prop-types',
2525
'react-is',
2626
'hoist-non-react-statics',
27-
'styled-components',
2827
'Element',
2928
],
3029
output: [

src/components/ColorBox/HSVGradient.jsx

Lines changed: 59 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88

99
import React from 'react';
1010
import PropTypes from 'prop-types';
11-
import styled from 'styled-components';
11+
import { makeStyles } from '@material-ui/core/styles';
1212
import * as CommonTypes from '../../helpers/commonTypes';
1313
import useEventCallback from '../../helpers/useEventCallback';
1414

@@ -32,60 +32,57 @@ const getRGB = _h => {
3232
return rgb;
3333
};
3434

35-
const StyledRoot = styled.div`
36-
position: absolute;
37-
width: inherit;
38-
height: inherit;
39-
background: ${props => `${props.cssRgb} none repeat scroll 0% 0%`};
40-
margin: 0;
41-
& .muicc-hsvgradient-s {
42-
position: absolute;
43-
width: 100%;
44-
height: 100%;
45-
background: rgba(0, 0, 0, 0) linear-gradient(to right, rgb(255, 255, 255), rgba(255, 255, 255, 0)) repeat scroll 0%
46-
0%;
47-
}
48-
& .muicc-hsvgradient-v {
49-
position: absolute;
50-
width: 100%;
51-
height: 100%;
52-
background: rgba(0, 0, 0, 0) linear-gradient(to top, rgb(0, 0, 0), rgba(0, 0, 0, 0)) repeat scroll 0% 0%;
53-
}
54-
& .muicc-hsvgradient-v {
55-
position: absolute;
56-
width: 100%;
57-
height: 100%;
58-
background: rgba(0, 0, 0, 0) linear-gradient(to top, rgb(0, 0, 0), rgba(0, 0, 0, 0)) repeat scroll 0% 0%;
59-
}
60-
& .muicc-hsvgradient-cursor {
61-
position: absolute;
62-
top: 0px;
63-
left: 0px;
64-
border: 1px solid #f0f0f0;
65-
box-shadow: rgba(0, 0, 0, 0.37) 0px 1px 4px 0px;
66-
transition: box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
67-
border-radius: 4px;
68-
cursor: ${props => !props.pressed && 'pointer'};
69-
zindex: 100;
70-
transform: translate(-4px, -4px);
71-
}
72-
& .muicc-hsvgradient-cursor:hover {
73-
box-shadow: 0px 0px 0px 8px rgba(63, 81, 181, 0.16);
74-
}
75-
& .muicc-hsvgradient-cursor:focus {
76-
outline: none !important;
77-
box-shadow: 0px 0px 0px 8px rgba(63, 81, 181, 0.16);
78-
}
79-
& .muicc-hsvgradient-cursor:focus > div {
80-
// TODO
81-
}
82-
& .muicc-hsvgradient-cursor-c {
83-
width: 8px;
84-
height: 8px;
85-
border-radius: 4px;
86-
box-shadow: white 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
87-
}
88-
`;
35+
const useStyles = makeStyles({
36+
root: {
37+
position: 'absolute',
38+
width: 'inherit',
39+
height: 'inherit',
40+
background: props => `${props.cssRgb} none repeat scroll 0% 0%`,
41+
margin: 0,
42+
},
43+
gradientPosition: {
44+
position: 'absolute',
45+
width: '100%',
46+
height: '100%',
47+
},
48+
hsvGradientS: {
49+
background:
50+
'rgba(0, 0, 0, 0) linear-gradient(to right, rgb(255, 255, 255), rgba(255, 255, 255, 0)) repeat scroll 0% 0%',
51+
},
52+
hsvGradientV: {
53+
background: 'rgba(0, 0, 0, 0) linear-gradient(to top, rgb(0, 0, 0), rgba(0, 0, 0, 0)) repeat scroll 0% 0%',
54+
},
55+
hsvGradientCursor: {
56+
position: 'absolute',
57+
top: 0,
58+
left: 0,
59+
borderColor: '#f0f0f0',
60+
borderWidth: 1,
61+
borderStyle: 'solid',
62+
boxShadow: 'rgba(0, 0, 0, 0.37) 0px 1px 4px 0px',
63+
transition: 'box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
64+
borderRadius: 4,
65+
cursor: props => !props.pressed && 'pointer',
66+
zIndex: 100,
67+
transform: 'translate(-4px, -4px)',
68+
'&:hover': {
69+
boxShadow: '0px 0px 0px 8px rgba(63, 81, 181, 0.16)',
70+
},
71+
'&:focus': {
72+
outline: 'none !important',
73+
boxShadow: '0px 0px 0px 8px rgba(63, 81, 181, 0.16)',
74+
},
75+
'&:focus > div': {
76+
// TODO
77+
},
78+
},
79+
hsvGradientCursorC: {
80+
width: 8,
81+
height: 8,
82+
borderRadius: 4,
83+
boxShadow: 'white 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08)',
84+
},
85+
});
8986

9087
const HSVGradient = ({ className, color, onChange, ...props }) => {
9188
const latestColor = React.useRef(color);
@@ -99,6 +96,7 @@ const HSVGradient = ({ className, color, onChange, ...props }) => {
9996
let cursorPos = { x: 0, y: 0 };
10097
const rgb = getRGB(color.hsv[0]);
10198
const cssRgb = `rgb(${rgb[0]},${rgb[1]},${rgb[2]})`;
99+
const classes = useStyles({ ...props, cssRgb });
102100

103101
const setPosition = (pos, f) => {
104102
cursorPos = pos;
@@ -225,9 +223,9 @@ const HSVGradient = ({ className, color, onChange, ...props }) => {
225223
});
226224
return (
227225
<div className={className}>
228-
<StyledRoot {...props} ref={box} cssRgb={cssRgb} data-testid="hsvgradient-color">
229-
<div className="muicc-hsvgradient-s">
230-
<div className="muicc-hsvgradient-v">
226+
<div className={classes.root} {...props} ref={box} data-testid="hsvgradient-color">
227+
<div className={`muicc-hsvgradient-s ${classes.hsvGradientS} ${classes.gradientPosition}`}>
228+
<div className={`muicc-hsvgradient-v ${classes.hsvGradientV} ${classes.gradientPosition}`}>
231229
<div
232230
ref={cursor}
233231
tabIndex="0"
@@ -237,16 +235,16 @@ const HSVGradient = ({ className, color, onChange, ...props }) => {
237235
aria-valuenow={color.hsv[1]}
238236
pressed={`${pressed}`}
239237
data-testid="hsvgradient-cursor"
240-
className="muicc-hsvgradient-cursor"
238+
className={`muicc-hsvgradient-cursor ${classes.hsvGradientCursor}`}
241239
onKeyDown={handleKey}
242240
onFocus={handleFocus}
243241
onBlur={handleBlur}
244242
>
245-
<div className="muicc-hsvgradient-cursor-c" />
243+
<div className={`muicc-hsvgradient-cursor-c ${classes.hsvGradientCursorC}`} />
246244
</div>
247245
</div>
248246
</div>
249-
</StyledRoot>
247+
</div>
250248
</div>
251249
);
252250
};

0 commit comments

Comments
 (0)